2. シンタックスハイライト/google-code-prettify/ちょっと書いてみる

 
2.1 設置方法
2.2 参考サイトの通りに書いてみる
2.3 折り返し時の行番号を確認

2.1 設置方法

 <head>~</head>
<link rel="stylesheet" href="./ggprettify/prettify.css" type="text/css">

 </body> の直前に

<script src="./ggprettify/prettify.js"></script>
<script src="./ggprettify/lang-css.js"></script>
<!-- prettyPrint()関数を実行するため追加↓ -->
<script>prettyPrint();</script>

 と書きます。
 後は次項のように記述します。

2.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);

2.3 折り返し時の行番号を確認

if (cli)
{
}

ってなんなの~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ちゃんと行数数えてる?
8
9
10
 本当は、もう少し綺麗に整形できるのですが、力尽きてしまいました。