GatsbyにシンタックスハイライターのPrism.jsを導入する

Gatsbyでソースコードを美しく表示してくれるシンタックスハイライターを導入した。今回は公式ドキュメントでも紹介されているPrismJSを導入した。

プラグインのインストール

PrismJSとGatsby用のプラグインのgatsby-remark-prismjsの二つをインストールする。

npm i -S prisms gatsby-remark-prismjs

プラグインの追加

plugins: [
	{
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-prismjs`,
        }
      ]
    }
  }
]

テーマの設定

gatsby-browser.jsにPrismJSのテーマの設定を追加する。 テーマはhttps://prismjs.com/から好きなものを選べば良い。

require("prismjs/themes/prism-twilight.css")

以上でコードが美しく表示できるようになる。