このテックブログは gatsby で作っていますが、今後テックブログとしてサンプルコードを書くこともあるでしょうから、先にその表示部分を設定しようと思い、prism の plugin を入れてみました。 特に困った部分や詰まった部分はなく、単純に 10 分ほどで設定ができたので、ぜひこちらを参考に皆さんも導入してみてください。

環境

前提として以下の環境で動作を確認しています。

• gatsbyjs のプロジェクト
• markdown ファイルから自動でページを生成するように gatsby-transformer-remark などを利用して設定

そのほかの前提として、

• 開発工数をかけられない
• 用意されているテーマで必要十分

といったところです。

手順

まず、npm のパッケージとして使うためにツールを install します。ただし、自分の場合 gatsby そのもののバージョンが低かったため、古いバージョンで依存関係が解決できるようにしました。

$ npm install --legacy-peer-deps gatsby-transformer-remark gatsby-remark-prismjs prismjs

次に、 gatsby-config.jsを設定していきます。

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-prismjs`,
        },
      ],
    },
  },
];

option は何も設定しませんでした。今後設定していく必要があればその時に改善していきます。

あとは prism のテーマが当たるように prism のテーマを設定してあげれば完成です。

// In your gatsby-browser.js
import "./src/styles/global.css";
import "prismjs/themes/prism-tomorrow.css";

このブログ自身で実際にソースコードを書いていますが、言語ごとのハイライトも効いているので問題ないかと。

参考資料

• https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs/
• https://prismjs.com/