GatsbyでSyntax Highlightingを変更する

いつも僕の記事を読んで頂きありがとうございます。今週末も家族で花見をするぞ！と今から張り切っているプログラミングおじさん、はむです。

さて、この記事では、Gatsby入門者あるいはこれからGatsbyでブログを書いてみることに興味のある方で、Gatsbyの最もstarが付いているstarterであるgatsby-starter-blogでブログを描き始めたものの、どうしてもsyntax highlightの変更方法が分からなくて困っている方を対象に、その方法について紹介しようと思います。(対象、狭くね？って？そんなこと言わない！w)

Gatsbyってなんやねん？という方は一応下にリンクを貼っておきますね。


すみません、上は違うGATSBYでした。。。(汗)正しいのはこちら(↓)です。


簡単にいうと、静的サイトジェネレータでReactで中の構造が書けて、GraphQL形式でメタデータを一元管理し、そのデータをサイト内のページでGraphQLで参照しながら書ける、データの持ち方はやっぱりDRY(Do Not Repeat Yourself! Man!)にしなきゃねっていう潔癖症なプログラマに好まれそうな、、、そんなツールです。

では早速上述の通りの前提でgatsby-starter-blogで既にブログサイトを作っているところから進めますけれども、プロジェクト直下のpackage.jsonファイルを開いてみて頂くと、gatsby-transformer-remark gatsby-remark-prismjs prismjsの3つのパッケージが既にあるかと思います。これはすなわち、既にsyntax highlightingに必要なパッケージが既にインストール済みであるということになります。(ない場合は、以下のコマンドでinstallしてください。)

$ npm install --save gatsby-transformer-remark gatsby-remark-prismjs prismjs

そしたら、今現在、パッケージ自体はあるもののsyntax highlightingを明示的にやっていないだけ、ということになりますので、あとは、適用したいお好みのテーマを決めてその設定を提要するだけでオッケー！っということになります。
簡単でしょ？

好きなテーマはこちらからお選びください。このサイトは、上で導入済みのprismjsの公式サイトで、このprismjsは多種多様なsyntax highlightingの設定のためのスタイリングをテーマという形で管理しているんですね。

こちらのサイトに行くと、右側に丸いボタンが縦に並んでいるじゃないですか。それらが全部テーマでして、それらをぽちぽちってクリックすると、画面の下の方にあるソースコードが表示されているエリアの見た目が変わりますよね！ここでいうそれぞれのテーマがやっている作業がsyntax highlightになります。

で、このsyntax highlightのカスタムをGatsbyでもやろうよっていうお話です。

では、手を動かしてみますか。Gatsbyのプロジェクト直下に、gatsby-config.jsっていうファイルがあるかと思います。こちらのファイルを開くと、pluginsっていうプロパティがありますね。その中には既にgatsby-transformer-remarkが登録されていると思います。そして、resolveっていうのがあって、gatsby-remark-prismjsが登録されていると思います。でもgatsby-remark-prismjsって書いてあるだけで、optionsについての設定はデフォルト状態だと何もないはずですので、こちらを以下のように変更します。

diff --git a/gatsby-config.js b/gatsby-config.js
index aea910c..6ae20c6 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -45,7 +45,42 @@ module.exports = {
               wrapperStyle: `margin-bottom: 1.0725rem`,
             },
           },
-          `gatsby-remark-prismjs`,
+          {
+            resolve: `gatsby-remark-prismjs`,
+            options: {
+              classPrefix: "language-",
+              inlineCodeMarker: null,
+              aliases: {},
+              showLineNumbers: false,
+              noInlineHighlight: false,
+            },
+          },
           `gatsby-remark-copy-linked-files`,
           `gatsby-remark-smartypants`,
         ],

ここの設定について興味のある方は、こちらを参考にしてみてください。

はい、以上でprismjsによるsyntax highlightingを使う準備ができました。

あとは、どのテーマを適用するかというかという設定をするだけですが、その設定は、gatsbyプロジェクトの直下にあるgatsby-browser.jsで行います。

どのテーマにするかは、prismjsのトップページで好きなテーマを選んでいただいて、あとは該当のテーマに関するスタイルシートを、こちらのprismのリポジトリにあるファイル一覧
から選んで、以下のようにimportしてあげます。

diff --git a/gatsby-browser.js b/gatsby-browser.js
index 466e18a..5936e2c 100644
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@@ -1,3 +1,10 @@
 // custom typefaces
 import "typeface-montserrat"
 import "typeface-merriweather"
+
+import 'prismjs/themes/prism-twilight.css'

では、ここまでの修正作業が完了したら、gatsbyのサイトをプレビューしてみましょう。

$ gatsby develop

はい、サーバが立ち上がり、syntax highlightが適用され、コードが綺麗になったじゃありませんか!

ちなみに、beforeはこちらで

afterがこちらです。

全然違うでしょ？

といことで、今回はGatsbyでsytax highlightの設定変更のご紹介でした。

Dive into Hacking!

はむ