非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

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

   

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

まずは基本をおさえる

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

https://highlightjs.org/
1

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

2

ダウンロードしたら解凍して、自分の作業フォルダに移動すれば使えます。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>

3

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

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

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

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

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

4

対処法

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

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

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

3

 

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

ガジェット系ブログもよろしく

すまたすログ

ガジェット系ブログです。主にChromebookの情報やMyマシンのASUS Flip C434TAのレビューなどを書いています。その他IT機器のアプリのレビュー、たまに100円ショップなど。


スポンサーリンク

 - HTML/JavaScript