ソース掲載用行番号動的付加のJavaScript

一つ前の記事でプログラムのソースコードを掲載した時に、「どうせ掲載するなら行番号もあったほうが見やすいよなぁ」。。。と思いながら、「でも、いちいち行の前後を<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> とソースの前後をタグで囲む

です。

個別記事を表示するとソースコードの表示部分に行番号が付加されてます。フロントページ(複数の記事が表示されてるところ)では、行番号の付加は行われません(追いかければできそうだけど、そこまで手が回ってないので :mrgreen: )。


ソース掲載用行番号動的付加のJavaScript」への2件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です