「highlight.js」の導入

no link

2016年01月25日 12:18:06

1つ後の記事：「NW.js（node-webkit）」と「Electron」の違いと感想

　Webサイトのブログ周りですが、ローカルアプリの部分を週末にごっそりと改良しました。

　2002年にWSH（Windows Scripting Host）で書いたプログラムを全面的に刷新して、Electronで書き直しました。

　その際に、以前から懸案だったシンタックスハイライトに対応をすることにしました。

「SyntaxHighlighter」「Google-code-prettify」「highlight.js」を検討して、導入が楽で、軽くて、メンテナンスが継続している「highlight.js」を使うことに決めました。

　この手のシンタックスハイライト系のJavaScriptですが、基本的に静的なHTMLに対して、ファイル読み込み後に装飾をするといった処理手順になっています。

　しかし、Electronでブログの執筆をするという用途から、動的に生成された「pre」タグに対して、シンタックスハイライトをしなければなりません。そこで、少し工夫が必要でしたので、そのコードをメモしておこうと思います。

　シンタックスハイライト導入の実験ということで。「highlight.js」は「<pre><code>〜</code></pre>」に対応しているので、その形式で指定しています。

<!-- /* highlight.js */ https://highlightjs.org/ -->
<!-- CSS は 以下で選ぶ。導入時は .min.css にする。
	https://highlightjs.org/static/demo/
	https://github.com/isagalaev/highlight.js/tree/master/src/styles -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/tomorrow-night-bright.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"></script>
<script>
	// highlight.js コード表示用コード
	hljs.configure({tabReplace: "  ", useBR: true});
	hljs.initHighlightingOnLoad();
	var execHljs = function(tgt) {
		$(tgt).find("pre code").each(function() {
			var $ths = $(this);
			hljs.highlightBlock(this)
			setTimeout(function() {
				$ths.html($ths.html().replace(/\t/g, "  "));
				$ths.css({fontSize: "1.2em", lineHeight: "150%"});
				$ths.find(".hljs-comment").css({color: "#0ff"})
			}, 10);
		});
	};
	$(function() {execHljs(document)});		// 読み込み時描画用

	// DOM動的追加時描画用
	$(function() {
		var observer = new MutationObserver(function(mutations) {
			mutations.forEach(function(mutation) {
				if (mutation.addedNodes.length == 0) {return}
				for (var i = 0; i < mutation.addedNodes.length; i ++) {
					execHljs(mutation.addedNodes[i]);
				}
			});
		});
		observer.observe(document, {childList: true, subtree: true});
	});
</script>

　MutationObserverを使って変更を監視して、変更があった場合に、「execHljs」関数で「pre code」にシンタックスハイライトを適用しています。

「$ths.html($ths.html().replace(/\t/g, " "));」としているのは、「highlight.js」のタブ置換は、行頭のタブのみだからです。なので自前で置換しています。

　さて、これでシンタックスハイライトはできるようになったのですが、問題は過去の記事です。

　タブの代わりに全角スペースで書いていたり、そもそも「pre」で囲っていなかったりしますので。

　頭が痛い問題ですが、時間を見つけて、データを目視で確認して、修正していかなければなりません。め、面倒だ……。

1つ前の記事：「クロクロ・ツールズ」に「HTMLタグ除去」をアップ

1つ後の記事：「NW.js（node-webkit）」と「Electron」の違いと感想