gatsbyのprismjsにテーマを適用する

このブログを Hinode仕様に変えたのですが、prismjsがLight Themeで非常に読みづらかったため、色を変えました。

gatsbyのprismjsをdracula themeにする

詳細は、 公式ドキュメントのここ に書かれています。

今回選択したThemeはdraculaです。 prism-themesに登録されています。

npm install prism-themes

その後、公式ドキュメントに従って gatsby-browser.js で以下を書き換えます。

// Highlighting for code blocks
import "prismjs/themes/prism.css"

例えば、 gatsby-stareter-blog のデフォルトだと上のように書かれています。

これを、

import "prism-themes/themes/prism-dracula.css"

このように書き換えたら、無事に変わります。