- 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
本当は、もう少し綺麗に整形できるのですが、力尽きてしまいました。
|