【Gatsby】シンタックスハイライト導入方法

最近、Gatsby + Netlify + Netlify CMSでブログを構築する方が増えてきましたね。

自分もお試しでブログを作成してみました。月300時間までのビルド時間制限がネックですが、無料でモダンなブログを運用できるのが魅力的です。

Gatsbyは有用なスターターが多いのですがコードブロック関係のプラグインまでは入っていないものもあり、かくいう私も導入する必要がありました。

そこでみつけたお洒落なシンタックスハイライトプラグイン(gatsby-remark-highlight-code)をご紹介します。

デザイン

導入方法

まず下記のどちらかのコマンドを実行してプラグイン(gatsby-remark-highlight-code)をダウンロードして下さい。

yarn add gatsby-transformer-remark gatsby-remark-highlight-code @deckdeckgo/highlight-code

または

npm install --save gatsby-transformer-remark gatsby-remark-highlight-code @deckdeckgo/highlight-code

次にgatsby-config.jsにプラグインを追加してください。

plugins: [
  {
    resolve: 'gatsby-transformer-remark',
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-highlight-code`,
          options: {
            terminal: 'carbon'
          }
        }
      ]
    }
  }
]

メインファイルまたはLayout.jsに以下を追加してください。

import { defineCustomElements as deckDeckGoHighlightElement } from '@deckdeckgo/highlight-code/dist/loader';
deckDeckGoHighlightElement();

以上で完了です。

テーマを変更する場合は、下記の様に変更できます。


plugins: [
  {
    resolve: 'gatsby-transformer-remark',
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-highlight-code`,
          options: {
            terminal: 'ubuntu',
            theme: 'vscode'
          }
        }
      ]
    }
  }
]

他のテーマ情報や各オプション情報については、

Github : https://github.com/deckgo/gatsby-remark-highlight-codeを参考にしてください。