GatsbyサイトにSyntax HighlighterのPrismJSを導入

GatsbyサイトにPrismJSを導入しました。PrismJSはソースコードに色を付けてくれるシンタックスハイライター（Syntax Highlighter）です。

Gatsbyだとプラグインがあって簡単に実装できます。でも、僕の場合、このサイトに合ったスタイルの調整に時間がかかってしまいました。

導入手順

基本的にはgatsby-remark-prismjsというプラグインを入れれば実装できます。

手順は以下の通りです。

1. パッケージのインストール

npm i -S gatsby-remark-prismjs

2. gatsby-config.jsにプラグインの追加

gatsby-config.jsにプラグインを追加します。このプラグインは先日導入したgatsby-transformer-remarkのオプションとして追加します。

  plugins: [
  
  /* 省略 */
  
    { resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-prismjs`,
          }
        ]
      }
    },
  ],

3. スタイルの追加

PrismJSのテーマCSSをダウンロードしてきて任意のフォルダに入れます。僕の場合は/src/styles/に入れました。他のグローバルスタイルもそこに入れているので。

PrismJSを使うページにCSSを設置します。プラグインの説明ページを見るとgatsby-browser.jsに追加と書いてあるんですが、僕の場合は記事ページだけでこのスタイルを使いたいので、記事のテンプレートでスタイルをimportしました。

import "../styles/prism-tomorrow.css"

以上です！