Gatsybyでシンタックスハイライトをつける
created: 2021-02-14
この blog はGatsbyで作ってますが、コードのシンタックスハイライトを入れてなかったので入れました
こういうコードが
こうなります
ハイライトのテーマがいくつかあるのですが、一番ひかえめなデフォルトのものにしました
入れ方
シンタックスハイライトしてくれるパッケージはいくつかあるのですが、よく使われてそうなPrismにしました
Gatsby plugin があるのでそれを利用
gatsby-remark-prismjs | Gatsby
ほぼ、ここに書いてある手順通りです
必要なものをインストール
npm install --save gatsby-transformer-remark gatsby-remark-prismjs prismjsgatsby-config.js に設定を追加
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-prismjs`,
options: {
classPrefix: 'language-',
inlineCodeMarker: null,
aliases: {},
showLineNumbers: false,
noInlineHighlight: false,
languageExtensions: [],
prompt: {
user: 'user',
host: 'localhost',
global: false,
},
escapeEntities: {},
},
},
],
},
},css を読み込む
gatsby-browser.js がなかったので、ファイル用意して書き込み
import 'prismjs/themes/prism.css'これでシンタックスハイライトされるようになりました
Amazonのアソシエイトとして、blog.freks.jp は適格販売により収入を得ています。
This site is managed by freks