Gatsby 上でシンタックスハイライトをきかせる

gatsby-starter-blogを使用している場合、
余計な設定は不要で使用可能。
4.,5. だけ読んどいたほうがいいかも。

1. 以下のモジュールをインストールする

prismjs
gatsby-remark-prismjs
gatsby-remark-prismjs-title

terminal

npm install -S prismjs gatsby-remark-prismjs gatsby-remark-prismjs-title

2. `gatsby-config.js`の書き換え

※ gatsby-starter-blogを使用しているのでこの手順はスキップ可能。

gatsby-config.js

resolve: `gatsby-transformer-remark`,
options: {
  plugins: [
    `gatsby-remark-prismjs-title`,
    `gatsby-remark-prismjs`,
  ]
},

3. `gatsby-browser.js`の書き換え

Prism を参考に好きなテーマで設定します。

例えばデフォルトなら、

gatsby-browser.js

// Highlighting for code blocks
import "prismjs/themes/prism.css"

例えばTomorrownightを適用させたいなら、

gatsby-browser.js

// Highlighting for code blocks
import "prismjs/themes/prism-tomorrow.css"

みたいな感じです。

4. ハイライトにタイトルをつける

ここまで正常に設定できていると、

これが

python:title=aiueo

gatsby develop するとこうなります。

<div class="gatsby-code-title">
  <span>aiueo</span>
</div>

これに対してスタイルシートを設定していきます。
なんでもいいのでimportしている CSS を書き換えます。
今回は、style.cssに全部ぶち込んでいるのでここに書きます。

ここはテーマに合わせて好きなように書き換えましょう。

style.css

.gatsby-code-title {
  background: #F5F2F0;
  color: #000;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  margin: 20px 0px -24px;
  padding: 8px 1rem 20px;
  font: size 1em;
  line-height: 1;
  display: table;
}

5. 記事がハイライトされ…ないときの Tips

Q. ここまでちゃんと設定したはずなのにシンタックスハイライトが効きません…

A. Markdown の書き方がおかしい可能性があります。

例えば、

index.md

python :aiueo

ではタイトルもつかないしシンタックスハイライトもつかないので

index.md

python:title=aiueo

とする。

ハイライトしたい言語のあとにスペースを挿入しないのがコツ。

できあがり

参考

GatsbyJS で作っているブログでシンタックスハイライトが適用されるようにしたキクナントカドットコム

 GatsbyJS ブログのコードブロックにタイトルと指定行のハイライトを追加したのふのふろぐ

Gatsbyでシンタックスハイライトをキメるまでの手順