highlight.js を、 CDN で使用する方法。

このブログを書くのに今までは google/code-prettify を使っていたんだけど、うまく hightlight されないのがあったりしたので、 highlight.js に乗り換えてみた。

使い方は非常に簡単。

ヘッダーに以下3行を追加するだけ。(スタイルは onedark を使用)

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/atom-one-dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

ただ、これでは基本的な言語のハイライトしか設定出来ない。 powershell とか、 golang とかも対応したい場合、個別に追加する必要がある。

highlight.js のサイトで個別に言語を指定してダウンロードすることもできるが、全部ポチポチ指定してダウンロードするのは面倒だったので、直接 CDN から使いたかった。

調べると、 isagalaev/highlight.js の README に書いてあった。 個別に使いたい言語を CDN から使うように指定すればいいみたい。

ということで、以下のようになりました。

<!-- hilight.js -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/atom-one-dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/languages/vim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/languages/dos.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/languages/go.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/languages/powershell.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/languages/haskell.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

べんり。


参考

コードのハイライト表示用 JS ライブラリ highlight.js の使い方

軽量で多言語なコードハイライトhighlight.jsの使い方