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

6217 ワード
JavaScript HTML Markdown gatsby CSS HTML テキストリンク

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 ブログのコードブロックにタイトルと指定行のハイライトを追加した のふのふろぐ