フォルダ
[Gatsby]シンタックスハイライトをカスタマイズ
- 公開日：2022/6/24
この記事は最終更新日から1年以上が経過しています。
コード記述が多いのでシンタックスハイライトの表示を充実させたいと思います。
環境
- Gatsby Starter Blog を使用したGatsby製ブログ
- gatsby-remark-prismjs が使える状態
テーマを変える
テーマの種類は以下のサイトで確認できます。
テーマは「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.',
},
```
なかなかいい感じになりました。