GatsbyJSでシンタックスハイライト(Syntax highlight)のテーマを変更する

flabaka

GatsbyJSでシンタックスハイライト(Syntax highlight)を使うには、どうすればいいのか?

以下の記事に、丁寧に書かれています。

テーマを変更してみる

このブログはgatsby-starter-blogを使っているので、特に設定せずともシンタックスハイライトが使える状態になっていました。

コードブロックに適用されているcssは、gatsby-browser.jsに定義されています。

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

このprism.cssファイルは何処にあるのかな? と探してみると、node_modules>prismjs>themesフォルダ内にありました。

これを(他のテーマのcssに)変更してあげれば良さそうです。

テーマをデフォルトから変更する際には、Prism公式サイトの画面右側にあるTHEME(初期値は、緑色の丸に囲まれたDEFAULT)を任意のものに変更し、(画面上で)どのようにデザインが変わるのかを確認しておくと良いかと。

先のnode_modules>prismjs>themesフォルダ内には、他にも幾つかcssファイルが入っていました。

その中にprism-coy.cssがあったので、(COYのテーマにスタイルを変更するには)これを使えば良さそう…

gatsby-browser.jsの記述を、以下の様に変更してみます。

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

コードブロックに適用されているcssを、変更することが出来ました。


© 2021 flabaka.com