highlight.jsを使う

HTML・CSS・JavaScript - お洒落プラグイン
2018年11月19日2:44に更新(約9時間前)
2018年11月6日23:29に作成(約12日前)

概要

HTML内にソースコードを書く機会は多いです。<pre><code>といったタグを利用しますが、そのままでは見た目的にカッコよくはありません。

また、プログラムであればその言語用にハイライトを行いたいと思うことでしょう。

highlight.jsを使えば、カッコよくハイライトされます。マークダウンとの相性も良いので、ブログの記事をマークダウンで書いている場合には特におすすめです。

私のブログで現在使っているのも、このhighlight.jsです。

使い方

HTMLのソースコードに3行追加するだけです(バージョンはどんどん上がっていくので、最新のバージョンを使う場合は調べてみましょう)。

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

ハイライトしたいソースコード部分を、以下のように囲みます。<pre><code>ソースコード</code></pre>という形ですね。

<pre>
  <code>import sys</code>
</pre>

私のブログは導入済みなので、見た目がどうなるかは↑のソースコード例などをご覧ください。

言語の指定

どの言語かを自動で判断してくれますが、こちら側から「この言語用にハイライトしろ」と指示することもできます。以下のコードはPythonコードとしてハイライトされます。classに指定するだけですね。

<pre>
  <code class="python">import sys</code>
</pre>

マークダウンで使う場合

マークダウンでコードブロックを表現する場合は、html直書きではなく専用の構文を使うのが一般的です。バッククォート3つで、そこがコードブロックと判断されます。

HTMLに出力する場合は<code><pre>...</pre></code>に囲まれます。つまり、マークダウンで以下のように書くと...

```
import sys
```

以下のように変換されるということです。

<pre>
  <code>import sys</code>
</pre>

更に、マークダウンをHTMLに変換するサービス・ライブラリの多くでは、マークダウンのコードブロックで言語を指定することもできます。以下のように書くと...

```python
import sys
```

以下のように変換されます。highlight.jsでそのまま使える状態ですね。

<pre>
  <code class="python">import sys</code>
</pre>

テーマの指定

使い方ではdraculaというテーマにしましたが、他にもたくさんのテーマがあります。 公式サイトでデモを試せるので、そこで実際に様々なテーマを試すとよいでしょう。

記事にコメントする