🌟 Gatsbyで美しいシンタックスハイライトを実現する方法

Gatsbyを使っているとき、コードスニペットを美しく、読みやすく表示することは、サイトの質を大きく向上させることができます。特に技術ブログやドキュメントサイトには欠かせない機能です。ここでは、GatsbyにPrism.jsを統合して、シンタックスハイライトを実現する手順を紹介します。

ステップ 1: 必要なプラグインをインストールする

まず、Prism.js を Gatsby に統合するためのプラグイン gatsby-remark-prismjs をインストールします。ターミナルで以下のコマンドを実行します：

npm install --save gatsby-remark-prismjs prismjs

ステップ 2: Gatsbyの設定ファイルを編集する

次に、gatsby-config.js ファイルを編集して、gatsby-remark-prismjs プラグインを設定します。このプラグインを gatsby-transformer-remark プラグインの plugins オプションに追加する必要があります。

module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-prismjs`,
            options: {
              // 追加するPrism.jsの設定を指定
              classPrefix: "language-",
              inlineCodeMarker: null,
              aliases: {},
              showLineNumbers: false, // 行番号を表示する場合はtrueにする
              noInlineHighlight: false,
              languageExtensions: [
                {
                  language: "superscript",
                  extend: "javascript",
                  definition: {
                    superscript_types: /(SuperType)/,
                  },
                  insertBefore: {
                    function: {
                      superscript_keywords: /(superif|superwhile)/,
                    },
                  },
                },
              ],
              prompt: {
                user: "root",
                host: "localhost",
                global: false,
              },
            },
          },
        ],
      },
    },
  ],
}

ステップ 3: テーマCSSをインポートする

好みのテーマのCSSをインポートする。

// gatsby-browser.js
import "prismjs/themes/prism-okaidia.css";