highlight.js with Ghost
今までコードブロックに書いたコードのシンタックスハイライトはPrismを使っていました。
Prismを使うには以下の手順が必要でした。
- テーマとハイライトしたい言語を選択して、ダウンロードボタンで
prism.jsとprism.cssをダウンロードする content/themes/casper/assets/js/、content/themes/casper/assets/css/以下に設置するdefault.hbsのヘッダでファイルを読み込む
このテーマのファイルをいじらなくてはいけない点に不満を持っていました(テーマをアップグレードしたり、別のテーマに変えると消失してしまうので)。
また、ハイライトを有効にする際、language-*と書かなければいけないのも若干面倒でした。
Prism自体は、見た目もきれいで好きなんですけどね...。
といわけで、少なくともヘッダに外部から読み込んで使えるようなもの(CDNでjsを提供しているところ)は無いか探したところ、highlight.jsなるものを見つけました。
ヘッダに書くだけで済むならghost管理画面のコードインジェクション機能でテーマを汚さず実現できる！
使い方
下記コードを管理画面のコードインジェクションでヘッダに挿入します。
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/github.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
これだけ！
さらに、パレット(コードブロックの背景)色やフォントのサイズ等もカスタマイズできます。
とりあえずパレットはデフォルトで、あとは行間と空白いじっています。何が出来るのかまだあんまり良くわかってないです。
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<style>
pre {
hyphens: none;
line-height: 1.3em;
}
pre code, pre tt {
white-space: pre;
}
</style>
- パレット一覧
- 例えば
default.min.cssをsolarized-light.min.cssとすることでパレットを変更できる
あと、ふつうにコードブロック書くだけで言語認識してよしなにハイライトしてくれます。
すごい ✨
感想
テーマを汚さないで済むのが気楽で良い。アップグレードする度にテーマのことを気にするのは大変なので...。
あと、デフォルトのテーマはあんまり気に入ってないので変える！テーマというか、外枠がいらない...消せるのかな...。
多分基本カスタマイズしないとダメなやつっぽい。あと対応言語、CDNにあるやつだと少ないかも...？
もうちょい使い込んでみる。