Jekyllのシンタックスハイライトテーマをカスタマイズする

シンタックスハイライトの個人的こだわり

個人的に、快適な開発環境は 快適なシンタックスハイライトから始まると思っていまして。

やっぱりテキストエディタってかなーり長い間にらめっこするものですから、色とフォントが自分好みだと最高に楽しいんですよね。自分好みの言語で、自分好みの色味、自分好みのフォント、自分好みの空間で開発するのって良くないですか。それです。

というわけで、私のエディタはハイライトが色々細かくカスタマイズされているんです。最初の画像のように。 これってアイデンティティになりませんか?よろしくお願いします。

---

---

JekyllのhighlighterはRougeというらしい

基本的にドキュメントが英語で出てきたら英語で読むタイプなのでどれは英単語のままでよくてどれを日本語で表記するべきかよくわかりません。英単語が多いかもしれませんがご容赦ください…

で、JekyllのhighlighterはRougeというらしいです。検索すると、RougeはPygmentsというものと互換性があるみたいですね。

A pure Ruby code highlighter that is compatible with Pygments

(rouge-ruby/rouge: A pure Ruby code highlighter that is compatible with Pygments(2024/12/19参照)より)

(筆者訳: 「Pygmentsと互換性のあるpure Rubyのcode highlighter」)

Jekyllのサイトをブラウザから見ると、そりゃそうですがシンタックスハイライトはCSSで付けられていますね。それぞれの文字に決まったクラスが割り当てられていて、これにつけるスタイルをいつものように上書きすれば変えられそうです。

Pygmentsの方にThemeのCSSが一覧で見れる、しかもダウンロードできる(!)サイトがありました。

今のエディタに近い見た目のThemeを落としてきて書き換えたら楽かもしれないと感じたので、 Native Themeを拝借しました。

ちなみに、このページ最初の画像が私のエディタの色設定です。バッファの背景色を言語ごとに変えているのがこだわりポイントです。が、背景色チェンジの再現は一旦後に回し、まずは文字色を変えることにします。

まずはどう変わったのかが確認できる環境づくり

CSSクラスを変更するとなると、思わぬところが変更されてしまうことも考えられるので、確認用のスニペットを置いたページを作りました。今のところ、こんな色になっています。

ピンクが多い。

配布されているテーマをインポート

/assets/css/配下に先ほどダウンロードしたテーマを置き、テーマのCSSでimportしてみます。それから、一旦、前に設定したハイライト上書きをコメントアウトしておきました。

@import 'native';

背景がテキスト部分にしか適用されていないように見えます。

あとはひたすらDevToolsやソースファイルとにらめっこして直します。

どうやらdiv.higilightに背景を適用すれば直りそうなので、落としてきたCSSを書き直します。

- .highlight pre { background-color: #404040 }
+ .highlight { background-color: #404040 }

デフォルトテーマの設定が邪魔問題

特に何かなければ上のような指定で問題ないと思われますが、私の場合、例のごとくChirpy themeがつけているセレクタのSpecificityに負けて元に戻っていました。

こういう場合、必ずしも!importantを使わなければ効かせられないという訳ではありません。DevToolsで要素のCSSをたどり、有効になっているところのセレクタをコピペしてくればいいのです。同じセレクタ、同じSpecificityなら、あとに指示したものが効きます。

- .highlight { background-color: #404040 }
+ @media (prefers-color-scheme: dark) {
+   html:not([data-mode]) .highlight, html:not([data-mode]) .highlight .w, html[data-mode=dark] .highlight, html[data-mode=dark] .highlight .w {

面倒なら、Chirpy Themeのgemからスタイルファイルをコピーしてきて該当部分を削除するのも手かもしれません。

というか私はprefers-color-scheme関係なくこのカラーリングにしたいのでそっちのほうが良いかもしれません。

syntax.scssなどのスタイルシートが適用されている

DevToolsで追ったりソースを探ったりすると、ライト/ダークテーマのシンタックスハイライトにはそれぞれ_sass/colors/配下のスタイルシートsyntax-light.scss / syntax-dark.scssを採用しているようだとわかりました。
そこで、自分のサイトのディレクトリに同じ構成を作ります。

.
└── _sass
    └── colors
        ├── syntax-dark.scss
        └── syntax-light.scss

それと、このほかにaddon/というディレクトリがあり、そこにsyntax.scssというファイルがありました。これにはdark/light両方に適用されていそうなスタイルが並んでいます。 共通部分を書き換えるなら、これもコピーすると良いでしょう。

_sass/
├── addon
│   └── syntax.scss
├── colors
│   ├── syntax-dark.scss
│   └── syntax-light.scss
└── main.scss

私の目的にはsyntax.scssの書き換えも必要そうなので、この構成を作りました。main.scssがこっそり増えていますが、これもコピーしないとなぜかsyntax.scssがgemからインポートされたので持ってきています。

さて、気を取り直して色を変えます。

クラスの確認、ハイライト指定

どこにどんなクラスが付いているのか確認しましょう。

公式の一覧はこちら。
https://github.com/rouge-ruby/rouge/wiki/List-of-tokens
とっても細かく決められているんですね。

適当に、すべてに違う色を割り当ててみると、本当に細かく分けられていることがわかります。

お遊びはここまでにして、ハイライトを自分の設定ファイルから書き写していきます。 まずは、上書きされないようにsyntax-light.scssとsyntax-dark.scssの.highlightで始まる色指定を全部コメントアウトしちゃいます。

あとは落としてきたハイライトテーマのCSSを、エディタの設定とDevToolsを見ながらひたすら書き換える!!

文字色変更結果

かなり近い色遣いにできました。 私のEmacsのスクショ(左)と、CSS調整後のこのサイトからのスクショ(右)を並べました。
一部、ちょっとごまかしていますが、ハイライトされるクラスまでいじろうとすると、パーサの方に手を入れることになるそうなので一旦ここまで。

Python

Pythonはあまり使わないのでエディタのハイライト設定よりもRouge版のほうがにぎやかになりました。

Ruby

RubyのハイライトはEmacsでは結構細かくカスタマイズしてあるんです。ブロック変数のところは頑張って色を当て直した思い出があります。Rouge版ではローカル変数にクラスがついていないようで、ちょっと惜しい感じになっちゃいました。

JavaScript

そっくりでびっくりしちゃった！thisとアロー関数は惜しかったですね。
エディタ上では、関数定義のほうが明るくて、関数呼び出しのほうが暗い、と若干違う黄色なんですよ。

言語ごとの設定

私のエディタでは言語ごとに背景色が若干変えてあります。これを再現すればかなりアイデンティティとしてわかりやすいのではないでしょうか。

先ほどからDevToolsで探っていて気づいたのですが、各コードブロックには言語ごとに固有の.language-<言語名>クラスが割り当てられているんですね。

ということで、これを使います。

.language-js   .highlight { background-color: #363630 }
.language-html .highlight { background-color: #383430 }
.language-ruby .highlight,
.language-rb   .highlight { background-color: #393030 }

こんな感じで簡単につけられました。