highlight.jsで動的に追加されたソースコードをハイライトする

highlight.jsを使って、ソースコードのハイライトを試みたのですが、<pre><code>～</code></pre>の中にソースコードを書き込んだ場合はうまくいったものの、JavaScriptで動的にソースコードを入れたものに対してはハイライトしなかったので、その対処法を書きます。（というか、標準機能でした。）

まずは基本をおさえる

highlight.jsはソースコードをハイライトする軽量なライブラリです。以下のサイトからダウンロードします。

https://highlightjs.org/

ハイライトしたいソースを選びます。初期設定でCommonのところにチェックマークが入っていますが、基本的にこれで十分かと思います。僕は追加で（今は使っていないけど）GoとSwiftを追加で選んでおきました。

ダウンロードしたら解凍して、自分の作業フォルダに移動すれば使えます。HTMLヘッダに以下のタグを入れればOK。

<link rel=”stylesheet” href=”styles/tomorrow-night.css”>
<script src=”highlight.pack.js”></script>
<script>hljs.initHighlightingOnLoad();</script>

<pre><code>～</code></pre>の中にソースコードを書けば自動でハイライトできます。超簡単です。

<pre><code>
using System;
using System.Drawing;
・・・
</code></pre>

JavaScriptから動的に追加するとハイライトされない

ソースコードが固定で入れていればいいのですが、以下のようにJavaScriptでソースコードを入れるとハイライトされません。

<pre><code id=”hcode”></code></pre>

document.getElementById(“hcode”).innerHTML = code;

codeという変数にはあらかじめソースコードを入れておいて、それをcodeタグに挿入するのですが、このケースではハイライトされません。以下がその例。

対処法

実はhighlight.jsで標準機能として持っています。読み込んだ後に、highlightBlockというAPIを使って「再ハイライト」を行うとうまくいきます。

document.getElementById(“hcode”).innerHTML = code;

$(document).ready(function() {
　$(‘pre code’).each(function(i, block) {
　　hljs.highlightBlock(block);
　});
});

 

標準機能なのですが、ヘルプがすべて英語のため、きちんと読み切れていませんでした。

 - HTML/JavaScript