やりたいこと
- GatsbyとGhostCMSを用いたブログにおいて(2021年3月にホームページと統合しました。)、シンタックスハイライトを適用させたい。
- Blockchain企業として、solidityのシンタックスハイライトが欲しい。
ライブラリ選定
さまざまなシンタックスハイライトのライブラリがあったが、今回はPrismjsを使うことにした。
なぜなら、Solidityに対応しているから。
何が問題だったか。
前提として、自分でpreやcodeタグを書いているわけではなかった。
<section className="content-body load-external-scripts"
dangerouslySetInnerHTML={{ __html: page.html }}
/>こんな感じで、cms側(今回はghost)から吐き出されたhtmlをdangerouslySetしている。
この状態だと、以下のように
// page.jsのような、記事ページのコンポーネントファイル内
import Prism from 'prismjs'
useEffect(() => {
Prism.highlightAll()
return () => {
Prism.highlightAll()
}
})npmパッケージとして読み込んだデフォルトのprismjsでは、js、html、cssしかサポートしていない。
本ブログでは、SolidityやGolangも扱いたい。
対応方法
「babel-plugin-prismjs」を見つけた。
これを使用するとデフォルトのprismjsに合わせて、各言語をサポートするファイルを一緒にbundleしてくれるらしい。
ただ、このプラグインの設定だけでは動かなかった。。。
そこでもう１コマンド！
npm install --save babel-preset-gatsbyこちらのコマンドでインストールする「babel-preset-gatsby」は、何をしているのか？
GatsbyはデフォルトでBabelを使ってコンパイルを行っている。そのため、内部的にすでにBabelの.babelrcファイルが存在している。
だから、babel-plugin-prismjsの指示にしたがって、新しく独自にプロジェクトのルートに.babelrcを追加しただけでは動かなかったのだと思う。
すでに存在している.babelrcに、新たに作成した.babelrcをセット(日本語的には追記？)するらしい。
それをしてくれるのが、babel-preset-gatsbyです。
インストールしたら、プロジェクトのrootに
// .babelrc
{
"presets": ["babel-preset-gatsby"],
"plugins": [
[
"prismjs",
{
"languages": [
"javascript",
"css",
"markup",
"bash",
"diff",
"docker",
"go",
"graphql",
"ignore",
"json",
"markdown",
"nginx",
"php",
"python",
"jsx",
"tsx",
"regex",
"ruby",
"solidity",
"sql",
"swift",
"typescript",
"vim",
"yaml"
],
"plugins": [],
"theme": "okaidia",
"css": true
}
]
]
}
こんな感じで.babelrcファイルを設定完了。okaidaという配色を選んだ。理由は、Nimil Developers Blogにおける配色に統一感が生み出されるカラーテーマだったから。
※私たちはBlockchain企業ですので、languagesにSolidityを入れております。ここに書いたので、Solidityの記事を書きたくなりました。
gatsby develop!!!
あとは、gatsby developをすれば綺麗にシンタックスハイライトされたcodeが出現！
参考にした記事はこちら。
お読みいただきありがとうございました！
