このテックブログは gatsby で作っていますが、今後テックブログとしてサンプルコードを書くこともあるでしょうから、先にその表示部分を設定しようと思い、prism の plugin を入れてみました。
特に困った部分や詰まった部分はなく、単純に 10 分ほどで設定ができたので、ぜひこちらを参考に皆さんも導入してみてください。
前提として以下の環境で動作を確認しています。
gatsby-transformer-remark
などを利用して設定そのほかの前提として、
といったところです。
まず、npm のパッケージとして使うためにツールを install します。ただし、自分の場合 gatsby そのもののバージョンが低かったため、古いバージョンで依存関係が解決できるようにしました。
$ npm install --legacy-peer-deps gatsby-transformer-remark gatsby-remark-prismjs prismjs
次に、 gatsby-config.js
を設定していきます。
// In your gatsby-config.js
plugins: [
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-prismjs`,
},
],
},
},
];
option は何も設定しませんでした。今後設定していく必要があればその時に改善していきます。
あとは prism のテーマが当たるように prism のテーマを設定してあげれば完成です。
// In your gatsby-browser.js
import "./src/styles/global.css";
import "prismjs/themes/prism-tomorrow.css";
このブログ自身で実際にソースコードを書いていますが、言語ごとのハイライトも効いているので問題ないかと。