2014/06/15

MutationObserverを使ってBloggerの動的ビューでSyntaxHighlighterを有効にする

最近、本ブログのデザインをBloggerの動的ビューに変更したことで、SyntaxHighlighterが使えなくなりました。

動的ビューでは動的に記事をDOMノードとして追加しているためです。

そこで、MutationObserverを使ってSyntaxHighlighterが効くようにしてみました。

Bloggerのダッシュボードから、テンプレート → HTMLの編集に移動してから、<head>に次のコードを追加します。

?
1
2
<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>末尾に移動して、次のコードを追加します。

?
1
2
3
4
5
6
7
<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>

続けて、次のコードを追加します。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
(function() {
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      var cl = mutation.target.classList;
      if (cl.contains(&#39;overview-open&#39;) || cl.contains(&#39;viewitem-open&#39;)) {
        var pres = document.querySelectorAll(&#39;pre&#39;);
        for (var i = 0; i &lt; pres.length; ++i) {
          SyntaxHighlighter.highlight(undefined, pres[i]);
        }
      }
    });
  });
  observer.observe(document.querySelector(&#39;body&#39;), {childList:true});
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.all();
}());
</script>

コード評価時と記事のDOMノード追加時にハイライトを行うようにしています。

理由は調べていませんが、記事のDOMノード追加時にはSyntaxHighlighter.all();だと駄目なようなので各<pre>タグを捜してSyntaxHighlighter.highlightしています。

おわりに

MutationObserverは最新ブラウザはほとんど対応しているので、本ブログに来るユーザはほとんど問題ないはずですが、 ハイライトが効かなくなっているユーザ (IE10以前とか) はごめんなさい。

関連リンク

ラベル: , ,

0 件のコメント:

コメントを投稿

注: コメントを投稿できるのは、このブログのメンバーだけです。

登録: コメントの投稿 (Atom)