highlight.jsの自動言語判別を無効化する
最近jupyter notebookをnbconvertコマンドでmarkdownに変換してここの投稿を行うことがある。
そのときに勝手に、Pythonのスクリプト結果にもコードブロックを適用してくれるのだが、hightlight.jsの言語自動判別機能によりよくわからないハイライトをされてしまうことがある。
Pythonのセルにはpythonであることを明示してくれるので、highlight.jsの自動判別機能をオフにすれば解決すると考え、この方法を行った。
そもそもhighlight.jsの設定方法
基本的なやり方
まず、公式曰くBasicなやり方
<link rel="stylesheet" href="/path/to/styles/default.min.css">
<script src="/path/to/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
これをheaderなどに入れるのが基本。
たとえば、インターネットからcssやjsを持ってくるCDNとかであれば、hrefやsrcを以下のように設定すれば特にファイルをダウンロードなど面倒な手段を講じることなくハイライトを実装できる。
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
最初に読み込むcssファイルでハイライトのやリ方を指定し、次に読み込んでいるJavascriptで言語の判別やcssを適用させるためにクラスを適用させる、といったことが行われる。
このサイトの場合
自分の場合は以下のコードを<footer>タグ内に入れている。footerに入れている理由は必ずしも必要ないレイアウトを整える機能のため、遅く読み込まれてもよいためである。
<!-- highlight.js -->
<link rel="stylesheet" href="/css/github-dark-dimmed.min.css">
<script src="/js/highlight.min.js"></script>
<script type="text/javascript">
hljs.highlightAll();
</script>
<!-- /hightlight.js -->
上記のケースでは、必要なファイルをCDNではなく、ローカルに持ってきて直接読み込んでいる。また、私の場合はgithubのハイライトを模したgithub-dark-dimmedというスタイルを適用するためにそれ用のcssを持ってきている。
デモサイトでスタイルを確認することができる。
自分でダウンロードする場合はこちらから。
注意点としては、ダウンロードページでチェックを入れた言語した対応してくれないのである程度確認する必要がある。自分が導入した時点ではDockerfileやLaTeXが漏れていたりしたので自分のよく使う言語が外れていないか一度確認するのをおすすめする。
CDNで言語追加やテーマ指定
言語を追加したい場合やテーマを指定したい場合は、highlight.jsのCDNが載っているサイトを見て、対応する言語に関連するjsファイルを追加で指定したり、テーマに関連するcssファイルを置き換えたりすれば良い。
たとえば、Dockerfileのハイライトを追加した上で、Tokyo Night Darkというテーマを適用したい場合は以下のようになる。（テーマ一覧はこちら）
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/tokyo-night-dark.min.css" integrity="sha512-dSQLLtgaq2iGigmy9xowRshaMzUHeiIUTvJW/SkUpb1J+ImXOPNGAI7ZC8V5/PiN/XN83B8uIk4qET7AMhdC5Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/languages/dockerfile.min.js" integrity="sha512-WIkfvdyru7M8xZwRAo2iaJS26LfLbiHTNxbDskU4zjmFz3zzcstiEbH+xqC21HZaK2weK1L+vvUx3ytpGCLzSA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>hljs.highlightAll();</script>
言語の自動識別を消す方法
以下のコードを適切な場所に加えるだけ。
hljs.configure({languages: []}); // invalidate language auto detection
自分の場合は以下。
<!-- highlight.js -->
<link rel="stylesheet" href="/css/github-dark-dimmed.min.css">
<script src="/js/highlight.min.js"></script>
<script type="text/javascript">
hljs.configure({languages: []}); // invalidate language auto detection
hljs.highlightAll();
</script>
<!-- /hightlight.js -->
何をしているの？
languages: an array of language names and aliases restricting auto detection to only these languages.
highlight.jsのconfigureにおいて、自動判別のときの言語リストを設定する項目があるが、これに対して、空のリストを設定してあげた。
そうすることで言語指定されていないものにはlanguage-undefined（未判別）クラスが適用されるのでハイライトが実装されない、ということになる。
コメント
昔はGoogleのpretty printを使用していたが、拡張性の高さからこちらにした。
上記に加えてマウスをホバーしたらコピーボタンが出現するスクリプトを実装したので、これについてもまとめたい。
