GatsbyでSyntax Highlightingを変更する

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

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

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

<a href="https://www.gatsby.jp/" target="_blank" rel="noopener">
  ![different-gatsby.png](https://qiita-image-store.s3.amazonaws.com/0/9001/ec6b262d-6c71-7810-124a-00bb98abe514.png)
</a>








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

<a href="https://www.gatsbyjs.com/" target="_blank" rel="noopener">
  ![gatsbyjs.png](https://qiita-image-store.s3.amazonaws.com/0/9001/4ccc69ef-62f2-0c8c-0784-405340926b57.png)
</a>

簡単にいうと、静的サイトジェネレータで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してください。)

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

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

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

<a href="https://prismjs.com/" target="_blank" rel="noopener">
  
![prismjs-top.png](https://qiita-image-store.s3.amazonaws.com/0/9001/64791213-cc4e-3764-ffd8-82454c2008ff.png)
</a>








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

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

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

```diff
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`,
         ],
```

ここの設定について興味のある方は、[こちら](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-prismjs)を参考にしてみてください。

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

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

どのテーマにするかは、prismjsのトップページで好きなテーマを選んでいただいて、あとは該当のテーマに関するスタイルシートを、[こちらのprismのリポジトリにあるファイル一覧](https://github.com/PrismJS/prism/tree/1d5047df37aacc900f8270b1c6215028f6988eb1/themeso)
から選んで、以下のようにimportしてあげます。

```diff
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のサイトをプレビューしてみましょう。

```bash
$ gatsby develop
```

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

ちなみに、beforeはこちらで


![before.png](https://qiita-image-store.s3.amazonaws.com/0/9001/cd8d9eac-09e3-b36a-a28c-908eb86802d6.png)




afterがこちらです。

![after.png](https://qiita-image-store.s3.amazonaws.com/0/9001/61c4ecd5-f0b9-0fce-5318-6b6f0efe25c1.png)


全然違うでしょ？

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

Dive into Hacking!

はむ