Dive into Hacking with Ham!

GatsbyでSyntax Highlightingを変更する

April 03, 2019

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

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

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

gatsby

すみません、上は違うGATSBYでした。。。(汗)

正しいのはこちら(↓)です。

gatsbyjs

簡単にいうと、静的サイトジェネレータで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の設定のためのスタイリングをテーマという形で管理しているんですね。

prismjs.com

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

Homebrew top page

afterがこちらです。

Homebrew top page

全然違うでしょ?

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

Dive into Hacking!

はむ


Ham

プログラミングおじさんのHamです。 このサイトではプログラミングに関する様々な記事や動画レクチャー等をお届けしています。 また、Udemy にて、ウェブプログラミング関連のコース(React・Redux/webpack/GraphQLなど)を絶賛配信中です。より体系的に学習したい方にオススメのコースです。