[Gatsby]シンタックスハイライトをカスタマイズ

  • 公開日:2022/6/24
この記事は最終更新日から2年以上が経過しています。

コード記述が多いのでシンタックスハイライトの表示を充実させたいと思います。

環境

テーマを変える

テーマの種類は以下のサイトで確認できます。

Prism

テーマは「Tomorrow Night」に決めました。さっそく、gatsby-browser.jsでテーマ用のcssをインポートします。

import "prismjs/themes/prism-tomorrow.css"

これでテーマが変更できました。

タイトルを表示する

対象ファイルや言語などを示せるとわかりやすいので導入します。
タイトル表示には gatsby-remark-prismjs-add-title が必要です。

インストール

npm install gatsby-remark-prismjs-title --save-dev

# 公式サイトにある以下の記述だと(現時点では)エラーになるのでご注意を
# 今後、名前が変わるのかな?
npm install gatsby-remark-prismjs-add-title --save-dev

プラグインを登録する

gatsby-config.jsに設定します。
コードブロックを使用する他のプラグインより前に定義する必要があります。(と、公式サイトに書いてありました)

plugins: [
  {
    resolve: 'gatsby-transformer-remark',
    options: {
      plugins: [
        'gatsby-remark-prismjs-title', // 他のプラグインより前に定義する!!!
        {
          resolve: 'gatsby-remark-images',
          options: {
            maxWidth: 630,
          },
        },
        /* 略 */
        'gatsby-remark-prismjs',
        /* 略 */
      ]
    }
  }
]

cssで整える

タイトル部分のタグにはgatsby-code-titleクラスが付与されるのでサイトデザインに合わせてcssで整えます。

pre[class*="language-"] {
  margin-top: 0 !important;
}
.gatsby-code-title {
  background-color: #110101;
  padding: .2em 1em .6em;
}
.gatsby-code-title span {
  color: #f7a2a2;
  font-size: small;
} 

記述例(Markdown)

Markdownでの記述は、言語指定の後に:title=ではじめる。

```js:title=gatsby-config.js
require('dotenv').config({
  path: '.env.${process.env.NODE_ENV}',
})
``` 

行番号を表示する

gatsby-browser.jsでcssをインポートします。

import "prismjs/plugins/line-numbers/prism-line-numbers.css"

cssで整える

サイトデザインに合わせてcssで整えます。

.gatsby-highlight pre[class*="language-"].line-numbers {
  padding-left: 4.2em;
}
.gatsby-highlight pre[class*="language-"].line-numbers .line-numbers-rows {
  padding: 1em 0 1em 1em;
}

記述例(Markdown)

Markdownでの記述は、言語指定の後に{numberLines:true}と書く。

```js{numberLines:true}:title=gatsby-config.js
require('dotenv').config({
  path: '.env.${process.env.NODE_ENV}',
})
```

開始番号を「1」以外からはじめる場合

trueとしていたところを開始したい番号(半角数字)で指定すればよい。
Markdownで記述するとこんな感じ。

```js{numberLines:8}:title=gatsby-config.js
require('dotenv').config({
  path: '.env.${process.env.NODE_ENV}',
})
```

任意の行をハイライト表示する

指定した行だけハイライト表示する方法です。
プラグインをインストールしたり、cssをインポートしたりする必要はありません。

cssで整える

ハイライト部分にはgatsby-highlight-code-lineクラスが付与されるのでサイトデザインに合わせて整えます。

.gatsby-highlight-code-line {
  display: block;
  border-left: .5em solid rgba(248,178,178,.4);
  background-color: rgba(248,178,178,.1);
  margin-left: -1.5em;
  margin-right: -1em;
  padding-left: 1em;
  padding-right: 1em;
}

Markdownでの記述は、ハイライトしたい行を{2,7-9}といった具合に指定します。

```js{numberLines:true}{2,7-9}:title=gatsby-config.js
require('dotenv').config({
  path: '.env.${process.env.NODE_ENV}',
})

const config = {
  siteMetadata: {
    title: 'IT女子のお気に入りフォルダ',
    author: {
      name: 'Sachiko',
      summary: 'who building useful things.',
    },
```  

なかなかいい感じになりました。

参考サイト

Gatsby Starter Blogに良さげなシンタックスハイライトを設定する | 無限実行