Bloggerのシンタックスハイライトを、SyntaxHighlighterからGoogle code-prettifyへ乗り換え

2018.05.27
プログラミングor技術

追記：2018/05/27：速攻で戻しちゃいました

タイトル通りですが、
世はHTTPS化の流れ。

いつからか知りませんが、(Bloggerでは?)HTTP通信で他所から読み込もうとするとダメになりました。
プログラミングな日々：Bloggerのhttps強化によるSyntaxHighlighter周りの修正

SyntaxHighlighterというシンタックスハイライトスクリプトを使っていたのですが、HTTP通信でいろいろロードするためBloggerでは上手く動かなくなっていました。
(HTTPSに対応したCDNから読み込むようにすれば動かせます)

なのでGooglePrettyprintに乗り換えることにします。

STEEL DRAGON 14106：Google code-prettifyの使い方（2017年6月現在）を参考に、<head>タグの一番後ろでスクリプトを読み込みます。


...(中略)
<!-- load google-prrettify -->

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

</head>

というのを追加します。

SyntaxHighlighterでは<pre>タグのclass属性に”brush; html”などを指定するのですが、
Google code-prettifyではclass属性に”prettyprint”を指定しなくてはなりません。

いちいち全ページのソースコードを書き換えるのは面倒だしこの後も変更があるかもしれないので、スクリプトで読み込み時に書き換えることにします。

<body>タグの中の最後のほうに、全ての<pre>タグのclass属性にprettyprintを追加するスクリプトを加えます。

...(中略)
<!-- Google prettyprint code execute-->

<script>

var initPrettyPrint = function() {

    Array.prototype.slice.call(document.querySelectorAll("pre")).forEach(function(pre) {

        // 全てのpre要素にclass="prettyprin";を付与

        pre.setAttribute("class", "prettyprint");

    });



    // 構文ハイライトを実行

    PR.prettyPrint();

};



// 上記の初期化処理を画面ロード時に一度だけ呼ぶ

window.addEventListener("load", initPrettyPrint, false);

</script>

</body>

コメント