highlight.js を使うことにしました
microCMS では html 内の code ブロックに class 名等を追加することが出来ないため、言語を指定できないので prism.js は無理でした。
そのため highlight.js を使うことにしました。
しかしテンプレートの jsx で import すると highlight.js は適用済みなのにクライアントの bundle に含まれることが分かりました。
それに対応するために html 周りを扱うプラグインを作成しました。
そのプラグインでは highlight.js 以外の事もしたかったので名前を gatsby-transformer-cheerio としました。(現在はgatsby-transformer-for-microcmsと名前を変えてnpmモジュールにしました)
cheerio で 2 つの処理を実行して結果を graphQL を詰め込む形にしました。
- html からテキストを抜き出す処理
- pre>code となっている code タグを見つけたら highlight.js の highlightAuto メソッドを呼び出す処理
gatsby-config.js に書くオプションは以下のようになります。
module.exports = {
plugins: [
{
resolve: 'gatsby-transformer-cheerio',
options: {
mediaType: 'MicrocmsBlog', // string
field: 'body', // string
},
},
],
};またリポジトリを作成してしまいました。
Photo by Mika Baumeister on Unsplash