マンガ
マンガPG IT＆息抜き系マンガ
ゲーム
Little Bit War Switch向け高速RTS
TinyWar high-speed 1ステージ数分の8bit風RTS
EX リバーシ 変形盤面、ステージ多数
PuzzleAndGame.com ブラウザで遊べるパズルやゲーム
no link
2016年01月25日 12:18:06
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>」に対応しているので、その形式で指定しています。
MutationObserverを使って変更を監視して、変更があった場合に、「execHljs」関数で「pre code」にシンタックスハイライトを適用しています。
「$ths.html($ths.html().replace(/\t/g, " "));」としているのは、「highlight.js」のタブ置換は、行頭のタブのみだからです。なので自前で置換しています。
さて、これでシンタックスハイライトはできるようになったのですが、問題は過去の記事です。
タブの代わりに全角スペースで書いていたり、そもそも「pre」で囲っていなかったりしますので。
頭が痛い問題ですが、時間を見つけて、データを目視で確認して、修正していかなければなりません。め、面倒だ……。
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」で囲っていなかったりしますので。
頭が痛い問題ですが、時間を見つけて、データを目視で確認して、修正していかなければなりません。め、面倒だ……。
▼
最新20件 (全て見る)
柳井が執筆した本や商品 （全て見る）
マンガでわかるJavaScriptのPromise
JavaScriptのPromiseをマンガで解説。無料。
JavaScriptのPromiseをマンガで解説。無料。
レトロ風RPG 全コード
JSのレトロゲーム風RPGの全コードを掲載＆解説。
JSのレトロゲーム風RPGの全コードを掲載＆解説。
タワーディフェンス 全コード
JSのタワーディフェンスの全コードを掲載＆解説。
JSのタワーディフェンスの全コードを掲載＆解説。
レトロゲームファクトリー
過去のゲームを最新機用に移植する会社のお仕事小説。新潮社より発売中。
過去のゲームを最新機用に移植する会社のお仕事小説。新潮社より発売中。
#電書ハック
電子書籍編集部のお仕事小説。文藝春秋より発売中。
電子書籍編集部のお仕事小説。文藝春秋より発売中。
顔貌売人 ハッカー探偵 鹿敷堂桂馬
シリーズ第2弾。文藝春秋より発売中。
シリーズ第2弾。文藝春秋より発売中。
裏切りのプログラム ハッカー探偵 鹿敷堂桂馬
松本清張賞の最終候補に残った拙作小説(デビュー作)。
松本清張賞の最終候補に残った拙作小説(デビュー作)。