一つ前の記事でプログラムのソースコードを掲載した時に、「どうせ掲載するなら行番号もあったほうが見やすいよなぁ」。。。と思いながら、「でも、いちいち行の前後を<li></li>タグで囲むのも面倒だしぃ」と 😀 そこで、ページのロード時に動的に行番号付きに書き換える JavaScript を書いてみました(まぁ、<>&などのエスケープがあるので、流しこむ前にプログラムで変換かけてるから、そっちでやっても大差はないんだけど 😀 こっちのほうが HTML のソース見たときに汚くないので)。
window.onload = function () {
if (document.getElementsByTagName)
{
for(i in document.getElementsByTagName("div"))
{
sCode = document.getElementsByTagName("div")[i];
if(sCode.className == "codeSource")
{
step1 = sCode.innerHTML.replace(/<pre>|<code>|<\/pre>|<\/code>/ig, "");
step2 = step1.replace(/^[ \n\t]+|[ \n\t]+$/g, "");
step3 = step2.replace(/\n/g, "</li>\n<li>");
sCode.innerHTML = "<pre><code><ol><li>" + step3 + "</li></ol></code></pre>";
}
}
}
}<div class=”codeSource”>で抜き出しているのは IE 対策。最初は<code class=”codeSource”>で抜き出すように書いたんだけど、どうも<pre></pre>で囲まれた中の要素をDOMで引き抜くと、期待どおりにデータが取れないっぽいです。 😕
途中の改行が空白に置き換わっちゃう（それも全部空白に置き換わるわけではないのが。。。不思議）。
んで、さんざん Web で調べたりして悩んでたどり着いたのが、「しかたないから<pre></pre>を含めて抜き出してみよう。。。」ということで、試してみたら、期待どおりのデータが取れました 8)
ただ、本来必要ないところまで取り出しているので、操作する部分が多くなってしまいました 😆
そして、Firefox, IE, Google Chrome, Opera で同作確認してから、WordPress の動作確認用のローカル環境で動かしてみると。。。WordPress が余計な空白やらタブ文字やらを付加してくれるので、それらを削除するコードを追加(<pre><code>を一度削除しているのはこれが理由) 😡 して、やっと完成して導入しました 🙂
使い方は、
- <head>から</head>に挟まれた中に、<script type=”text/javascript” src=”JavaScriptのパス/ファイル名”></script> でJavaScript を読み込む
- <div class=”codeSource”><pre><code>ソース</code></pre></div> とソースの前後をタグで囲む
です。
個別記事を表示するとソースコードの表示部分に行番号が付加されてます。フロントページ（複数の記事が表示されてるところ）では、行番号の付加は行われません（追いかければできそうだけど、そこまで手が回ってないので 
）。
Thanks alot – your answer solved all my problems after sveaerl days struggling
Thank you for the comment. I was useful and glad of this article 🙂