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



　本当は、もう少し綺麗に整形できるのですが、力尽きてしまいました。