yuya-yuzen

GatsbyJSで構築したブログサイトの記事にシンタックスハイライトを付ける

2020/08/09
2020/08/09

GatsbyJSで構築したブログサイトで、記事にシンタックスハイライトを付ける方法について解説します。

結論

gatsby-remark-prismjs というプラグインを導入します。

gatsby-remark-prismjs | GatsbyJS

前提

  • 筆者の環境

    • Windows 10 Home 64bit
    • node v12.18.0
    • npm 6.14.4

手順

  1. パッケージをインストールする
  2. 設定ファイルにプラグインの記述をする
  3. テーマを選び、インポートする

パッケージをインストールする

3つのパッケージをインストールします。

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

設定ファイルにプラグインの記述をする

gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`
      options: {
        plugins: [
          `gatsby-remark-prismjs`
        ]
      }
    }
  ]
}

テーマを選び、インポートする

Prism.jsの公式サイトからテーマを選びます。
以下の8つのテーマがあるはずです。

  • DEFAULT
  • DARK
  • FUNKY
  • OKAIDIA
  • TWILIGHT
  • COY
  • SOLARIZED LIGHT
  • TOMORROW NIGHT

テーマを選んだら、設定ファイルにインポートします。

gatsby-browser.js
import 'prismjs/themes/prism-tomorrow.css'

インポートするだけで、シンタックスハイライトが付いていることが確認できると思います。

おまけ

テーマをそのまま使ってもいいのですが、少し手を加えたい場合もあるかと思います。
そんなときは、例えば以下のようにCSSファイルを記述すると、修正することもできます。

.gatsby-code-title {
  background: #999;
  color: #eee;
  margin-bottom: -8px;
  padding: 6px 12px;
  font-size: 0.8em;
  line-height: 1;
  display: table;
  border-radius: 4px 4px 0 0;
}

.language-text {
  color: #333;
  background-color: #eee;
  padding: 0.1em 0.4em;
}

Share:
ゆうや