GatsbyにシンタックスハイライターのPrism.jsを導入する
Gatsbyでソースコードを美しく表示してくれるシンタックスハイライターを導入した。今回は公式ドキュメントでも紹介されているPrismJSを導入した。
プラグインのインストール
PrismJSとGatsby用のプラグインのgatsby-remark-prismjsの二つをインストールする。
npm i -S prisms gatsby-remark-prismjsプラグインの追加
plugins: [
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-prismjs`,
}
]
}
}
]テーマの設定
gatsby-browser.jsにPrismJSのテーマの設定を追加する。
テーマはhttps://prismjs.com/から好きなものを選べば良い。
require("prismjs/themes/prism-twilight.css")以上でコードが美しく表示できるようになる。