GatsbyJSでソースコードのシンタックスハイライト

ウェブの海

技術ログなんだから、ソースコードを見やすくしたかったのです。

まずはインストールから

プラグインの公式

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

3つインストールしますが、すでにインストール済みのものはしなくても大丈夫です。

設定を書きます

gatsby-config.jsを編集します。

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

最低これだけあれば動きます。
これ以外のオプションは公式を参照。

CSSを適用します

次に、gatsby-browser.jsを編集します(見当たらなかったら作成)。
テーマは何種類かあるので、prismの公式でテーマをプレビューして決めるのがおすすめです。
(個人的にはmonokaiが欲しい)

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

今回はsolarizedlightを採用しました。

MDを編集します

今回MDにコードを載せるかんじです。
バッククオート(`)3つに続けて「css」や「javascript」と言語名を書きます。
コードを閉じる時もバッククオート3つで閉じます。

そして

$ gatsby develop

で確認できれば完了です。
あとはbuildするなりgitにpushするなりしましょう。

タイトルとURLをコピーしました