最近、本ブログのデザインをBloggerの動的ビューに変更したことで、SyntaxHighlighterが使えなくなりました。
動的ビューでは動的に記事をDOMノードとして追加しているためです。
そこで、MutationObserverを使ってSyntaxHighlighterが効くようにしてみました。
Bloggerのダッシュボードから、テンプレート → HTMLの編集に移動してから、<head>に次のコードを追加します。
<link href="//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css" rel="stylesheet" type="text/css" /> <link href="//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.min.css" rel="stylesheet" type="text/css" />
続いて、<body>末尾に移動して、次のコードを追加します。
<script src="//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPlain.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushBash.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCpp.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js"></script>
続けて、次のコードを追加します。
<script type="text/javascript">
(function() {
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
var cl = mutation.target.classList;
if (cl.contains('overview-open') || cl.contains('viewitem-open')) {
var pres = document.querySelectorAll('pre');
for (var i = 0; i < pres.length; ++i) {
SyntaxHighlighter.highlight(undefined, pres[i]);
}
}
});
});
observer.observe(document.querySelector('body'), {childList:true});
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
}());
</script>
コード評価時と記事のDOMノード追加時にハイライトを行うようにしています。
理由は調べていませんが、記事のDOMノード追加時にはSyntaxHighlighter.all();だと駄目なようなので各<pre>タグを捜してSyntaxHighlighter.highlightしています。
おわりに
MutationObserverは最新ブラウザはほとんど対応しているので、本ブログに来るユーザはほとんど問題ないはずですが、 ハイライトが効かなくなっているユーザ (IE10以前とか) はごめんなさい。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。