highlightjs-highlight-lines.js

Feb. 27, 2019, 6:43 a.m. edited Feb. 27, 2019, 8:15 a.m.

ブログでソースコードを貼り付けるときにシンタックスハイライトをつけると見栄えが良くなります。そのための便利なライブラリは

などが有名です。それぞれ色々な特徴がありますが、当ブログではhighlight.jsを用いています。

使い方は非常に簡単で、基本的には<head>内に

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

と書くだけで、そのページにある<pre><code></code></pre>内のソースコードがすべてシンタックスハイライトされます。また、テーマも豊富にあり、デモページでそのスタイルの一覧を見ることができます。もっとも実際のCSSまでのパスはCDNから探すのが便利だと思います。

行を強調したい

連載系のブログで前回の記事のプログラムからの差分を示すときなどに行を強調したいという需要があります。私も「PyO3とrust-numpyを使ってPythonからNumPyをRustに渡して操作する」という「PyO3でPythonからRustで作ったライブラリを呼ぶ」の続きの記事において、プログラムの書き加えた部分を示すためにいくつかの行を強調したくなりました。

ゆえに調べてみるとissueが立っていましたが、highlight.js自体は対応するつもりはないとのことでした1

そこで、highlight.jsで行を強調するためのプラグインを作りました。それが

highlightjs-highlight-lines.js

です。

使い方

GitHubにも載せていますが一応。

<head>の本家highlight.jsを読み込んだ後に読み込みます。つまり、

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js"></script>
<script src="//cdn.jsdelivr.net/gh/TRSasasusu/highlightjs-highlight-lines.js@1.1.5/highlightjs-highlight-lines.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
hljs.initHighlightLinesOnLoad([
    [{start: 1, end: 3, color: '#555'}, {start: 6, end: 6, color: 'yellow'},], // ページにある最初の<pre><code></code></pre>の2行目から4行目を#555で強調し、7行目を黄色で強調する
    [{start: 2, end: 3, color: 'rgba(255, 255, 255, 0.2)'},], // ページにある2番目の<pre><code></code></pre>の3行目から4行目をrgba(255, 255, 255, 0.2)で強調する
]);
</script>

という形です。説明は各行のコメントに書いてあります。強調されててわかりやすい!!

また、行番号表示プラグインのhighlightjs-line-numbers.jsとも一緒に使うことができ、詳しくはGitHubを見てください。