3. シンタックスハイライト/google-code-prettify/スクリプトローダーを使ってみる

 
3.1 設置方法
3.2 表示例

3.1 設置方法

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

 ローカルの run_prettify.js では、うまくロードできませんでした。

 <body>
<body onload="PR.prettyPrint()">

 と書きます。


3.2 表示例

<pre class="prettyprint lang-js linenums"">
var initPrettyPrint = function() {
    Array.prototype.slice.call(document.querySelectorAll("#main > pre")).forEach(function(pre) {
        // メインとなる要素直下に存在する全てのpre要素にclass="prettyprint"を付与
        pre.setAttribute("class", "prettyprint");
    });

    // 構文ハイライトを実行
    PR.prettyPrint();
};

// 上記の初期化処理を画面ロード時に一度だけ呼ぶ
window.addEventListener("load", initPrettyPrint, false);
</pre>

 と記述すると以下のように表示されます。

var initPrettyPrint = function() {
    Array.prototype.slice.call(document.querySelectorAll("#main > pre")).forEach(function(pre) {
        // メインとなる要素直下に存在する全てのpre要素にclass="prettyprint"を付与
        pre.setAttribute("class", "prettyprint");
    });

    // 構文ハイライトを実行
    PR.prettyPrint();
};

// 上記の初期化処理を画面ロード時に一度だけ呼ぶ
window.addEventListener("load", initPrettyPrint, false);