noguzo blog

Gatsbyでシンタックスハイライトを有効にする

2019.09.28

コードを書いていくときにどうしてもシンタックスハイライトが必要になります。 デフォルトだと設定されていないので、オフィシャルのプラグインを使ってシンタックスハイライトを有効化していきます。

今回はgatsby-remark-prismjsを使用します。

install

npm install --save gatsby-transformer-remark gatsby-remark-prismjs prismjs

設定

gatsby-config.js

gatsby-config.jsで設定をしていきます。

pluginsにこちらを追加します。

plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-prismjs`,
          options: {
            classPrefix: "language-",
            inlineCodeMarker: null,
            aliases: {},
            showLineNumbers: false,
            noInlineHighlight: false,
            languageExtensions: [
              {
                language: "superscript",
                extend: "javascript",
                definition: {
                  superscript_types: /(SuperType)/,
                },
                insertBefore: {
                  function: {
                    superscript_keywords: /(superif|superelse)/,
                  },
                },
              },
            ],
            prompt: {
              user: "root",
              host: "localhost",
              global: false,
            }
          }
        }
      ]
    }
  }
]

注意

gatsby-congig.jsに設定を追加すると画像が表示されなくなる可能性があります。 実は、すでにgatsby-transformer-remarkの設定がしてある場合があり、 その際↑の設定だけ追加すると既存であった設定を上書きしてしまい画像が表示されなくなります。

そのときは、

  `gatsby-remark-prismjs`,

の部分を、以下に書き換えればうまく動いてくれます。

{
  resolve: `gatsby-remark-prismjs`,
  options: {
    classPrefix: "language-",
    inlineCodeMarker: null,
    aliases: {},
    showLineNumbers: false,
    noInlineHighlight: false,
    languageExtensions: [
      {
        language: "superscript",
        extend: "javascript",
        definition: {
          superscript_types: /(SuperType)/,
        },
        insertBefore: {
          function: {
            superscript_keywords: /(superif|superelse)/,
          },
        },
      },
    ],
    prompt: {
      user: "root",
      host: "localhost",
      global: false,
    }
  }
},

styleを適用

シンタックスハイライトはPrism.jsというライブラリを使用しているため、 Prism.jsが用意しているスタイルを簡単に使用できます。(こちらからpreviewも見られます)

自分はOKADIAを選びました。

gatsby-browser.jsにこちらの記述を追加します。

import "prismjs/themes/prism-okaidia.css"

これでシンタックスハイライトが有効になりました。

おしまい。

参考

https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/


Frontend engineer.