はてなブログのシンタックスハイライトの色をカスタマイズするためのツールを作った
TL;DR
作ったものはこれです。
GitHub で公開しているのでご自由にお使いください。
動機
はてなブログではコードブロックに対してシンタックスハイライトを適用できますが、 highlight.js や prism.js などの有名なシンタックスハイライターは使用されていないようで、シンタックスハイライトのカラーテーマをカスタマイズするのは簡単ではありません。
Google で検索してみると、みなさんそれぞれ自分の好きなカラーテーマの色を参考に、はてなブログのシンタックスハイライトの色を変更する CSS を作成して使用しているようでした (参考サイト参照)。
私は Dracula テーマを愛用しているので、はてなブログのシンタックスハイライトにも Dracula を使用したかったのですが、既存のものは見つけられませんでした。 こうなれば自分で CSS を作るしかありません。
しかしいざ CSS をカスタマイズしようとすると、次のような問題にぶちあたりました。
- どのクラスがどこの色に対応しているのかがよくわからない
- 作った CSS での見た目を確認するのが面倒くさい
- リアルタイムで確認したい
ということで、リアルタイムで見た目を確認しながらカスタム CSS を出力できるツールを作ることにしました。
作ったもの
その名も はてなブログシンタックスハイライト CSS ジェネレータ です (長い)
こちらから利用できます。
主な機能や特徴:
- 色を変更するとリアルタイムにプレビューと CSS が確認できる
- ブラウザを閉じてしまっても、もう一度開けば直前の状態に復元される
- インポート/エクスポート機能
右側のパレットに色を入力すると、リアルタイムに左側のプレビューが更新されます。それと同時に、下のデザイン CSS もリアルタイムに生成されます。
How it works
今回は練習も兼ねて React で実装しました。 React を本格的に使用したのははじめてですが、かなり直感的に、簡単に作れました。これからも使っていきたいです。
このツールの仕組みは簡単で、右側のパレットの Value が更新されたタイミングでプレビューとデザイン CSS のコンポーネントの props を更新して再描画しているだけです。 React っぽいですね。
ちなみにこのツールのソースコードは全て GitHub に公開しています。
React 初学者なので間違っているところや非効率的なところなどあるかと思いますが、同じく初学者にとって参考になれば幸いです。
識者の方は、ここがおかしい！とかお気軽にコメントなり Issue を送ってもらえると嬉しいです。(PR を投げて頂けるともっと嬉しいです 👏)
課題
サンプルコードが固定
現状、最初から表示されている Kotlin のサンプルコードでしかプレビューを確認できません。
幾つかの言語でサンプルコードを用意しておいて、それを切り替えられるようにしたいと思ってます (PR 待ってます)。
はてなブログのシンタックスハイライトに使われているツールが不明
実ははてなブログのシンタックスハイライトがどのようにコードの役割 (Constant とか Type とか) を判断しているのかよくわかっていません。
はてなさんのお手製のツールが使用されているのでしょうか？
もしこれがわかれば (そしてそのツールが利用できれば) 、ユーザが任意の言語の任意のコードを貼り付けてプレビューが確認できるようになるのですが、現状できていません。
ちなみに今回は、はてなブログのプレビューなどで実際にはてなブログによって生成された HTML コードを React で使用しているコンポーネント ( CodeParts ) に自動的に変換するためのツールを作ってそれを使用しました。気になる方は、 Generator コンポーネントを読んでみてください。
