はじめに
普段はC++を書いています。
ブログとかでコードをハイライトしたいとき、最近ではhighlight.jsとかgoogle code prettifyとか色々ありますが、私は未だにSyntaxHighlighter version 3.0.83を使っています。
というのはC++を書く上で「自分で型定義をどっさり追加できる」OR「C++を構文解析できる」が必須要件だからです。
後者はハードルが高すぎるので前者を満たすSyntaxHighlighter大好きです。
Githubとかから動的にソースコードを読み込むには=>gist-it
さて、今日なにかソースコードを書いたらGithubとかGistとかpastebinで公開するわけです。だれもブログにいちいちコピペなんてしません。
つまり動的にソースコードを読み込んでハイライトする必要があります。
例えばGithubのソースコードを読み込むにはgist-itがありました。
Gistとpastebinは特に何もしないでもそのまま読み込めますね。
それでも私はSyntaxHighlighterが使いたい
pastebinが何でハイライトしているか忘れましたが、Gistやgist-itはgoogle code prettifyを使っています。
でもそうやってあちこちから読み込んでいるとデザインがバラバラになってしまいますね！
UTF-8なplain textをfetchしてsyntaxhighlighterに力技でぶち込むクラスを作る
というわけで作ります。
要件
- fetchしてソースコードを非同期に取ってくる
- あかん文字はエスケープする
- HTML中に
innerHTMLを使ってぶち込む - 全部ぶち込み終わったら
SyntaxHighlighter.all();する(頻繁にDOMの大規模更新すると重い)
この仕様ならUTF-8なplain textが手に入れば問答無用でぶち込めるし、少しいじれば他のハイライターでも使えそう。
作った
class初めて書いた、fetch初めて書いた、Arrow function初めて書いた、getter/setter初めて書いた出遅れ勢のコードです。大目に見てください。
thisを前もって束縛しなくていいの便利ですね。
使い方
いつも通りsyntaxhighlighterのJSとCSSを読み込んだあと、
<script type="text/javascript" src="https://cdn.rawgit.com/yumetodo/15c507cabf753d6d36842fe7c87edc6b/raw/2cf4c48dec052b86c0558cce5209391c4e9297aa/syntaxhighlighter_from_web.js"></script>
<div id="romaji2kana_h"></div>
<div id="Source_c"></div>
<script>
(function(){
let syntaxhighlight_manager = new syntaxhighlighter_from_web();
syntaxhighlight_manager.load(
"https://raw.githubusercontent.com/yumetodo/romaji2kana/master/romaji2kana/romaji2kana.h",
"romaji2kana_h", "cpp", "romaji2kana.h"
);
syntaxhighlight_manager.load(
"https://raw.githubusercontent.com/yumetodo/romaji2kana/master/romaji2kana/Source.c",
"Source_c", "cpp", "Source.c"
);
syntaxhighlight_manager.highlight();
}());
</script>
こんな風に書く。
動作例
フリーソフトの旅（windows）Re:ある「プロ」の書いた、初心者向けc言語入門プログラム
書き終わって気がついたこと
classってIE11では動かないんですね。普段FirefoxとChrome使ってたから気が付かなかった。Edgeでは動いた。
将来
<pre class="brush: lisp" data-sh-content-uri="/home/lawlist/archives/init.el">
this will be replaced and highlighted here when content is loaded..
</pre>
こんな感じにかけるようにする提案が出ている。