freks blog

Gatsybyでシンタックスハイライトをつける

この blog はGatsbyで作ってますが、コードのシンタックスハイライトを入れてなかったので入れました

こういうコードが

before code highlighting

こうなります

after code highlighting

ハイライトのテーマがいくつかあるのですが、一番ひかえめなデフォルトのものにしました

入れ方

シンタックスハイライトしてくれるパッケージはいくつかあるのですが、よく使われてそうなPrismにしました

Gatsby plugin があるのでそれを利用
gatsby-remark-prismjs | Gatsby

ほぼ、ここに書いてある手順通りです

必要なものをインストール

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

gatsby-config.js に設定を追加

    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-prismjs`,
            options: {
              classPrefix: 'language-',
              inlineCodeMarker: null,
              aliases: {},
              showLineNumbers: false,
              noInlineHighlight: false,
              languageExtensions: [],
              prompt: {
                user: 'user',
                host: 'localhost',
                global: false,
              },
              escapeEntities: {},
            },
          },
        ],
      },
    },

css を読み込む
gatsby-browser.js がなかったので、ファイル用意して書き込み

import 'prismjs/themes/prism.css'

これでシンタックスハイライトされるようになりました