やりたいこと

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」を見つけた。

https://www.npmjs.com/package/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が出現！

参考にした記事はこちら。

お読みいただきありがとうございました！

category Gatsby