◇WEBページに行番号付きテキストを張りつける

(試験中)

WEB上にスクリプトサンプルを行番号付き、等幅フォント、空白有効で表示したいことは 良くあります。

良く探せばツールはあるとは思うのですが、見つからなかったので作成しました。
<div class=hiNumberedText>に入れられた<pre>の内容を番号付きに変換します。
例えば

<script type="text/javascript" src="../../../js/hiNumberedText.js"></script>
<div class=hiNumberedText>
<pre>
abcd
   efg
      longline longline longline longline longline longline longline longline longline longline longline longline longline longline longline
xyz
   // ヘッダ部
   if( table.tHead != undefined ){
      var headColor= hiAttrVal(table,"headColor","#000066"); // ヘッダの色
</pre>
</div>

という記述で

abcd
   efg
      longline longline longline longline longline longline longline longline longline longline longline longline longline longline longline
xyz
   // ヘッダ部
   if( table.tHead != undefined ){
      var headColor= hiAttrVal(table,"headColor","#000066"); // ヘッダの色

を得ることができます。Javascriptが動かない環境では単純な<pre>表記となります。

現版ではプレーンテキストのみ対応しており、途中に<span>などがあるものは対応していません。

hiNumberedText.jsの内容は次のものです。

var hiNumTextClass;
function hiNumberedText(){
   var tables= document.getElementsByTagName("div");
   if( hiNumTextClass==undefined ) hiNumTextClass="hiNumberedText";
   for(var t=0;t<tables.length;++t){
      var table=tables[t];
      if( table.className.match(hiNumTextClass) ){
         hiNumberedTextSub(table);
         }
      }
   }
function hiGetNumberedText(obj){
   if( obj.textContent!=undefined ) { // Chromeの場合
      var len= obj.textContent.length;
      return obj.textContent.substring(1,len-2); // Chromeでは前後に改行が付く
      }
   return obj.innerText; // IEの場合
   }
function hiNumberedTextSub(obj){
   var text = hiGetNumberedText(obj);
   var lines= text.split("\n");
   if( lines.length==1 ) lines = lines[0].split("\r");
   var s="<div style='background-color:#E8E8E8;overflow:auto'><pre><ol>";
   for(var idx=0;idx<lines.length;++idx){
      s+="<li>"
        +lines[idx].split("&").join("&amp;")
                   .split("<").join("&lt;")
        +"</li>";
      }
   s += "</ol></pre></div>";
   obj.innerHTML=s;
   obj.style.fontFamily="'ＭＳ ゴシック', monospace";
   obj.style.fontSize="7.5pt";
   obj.style.display="inline";
   }
try{
   window.addEventListener("load",hiNumberedText,false);
   }
catch(e){
   window.attachEvent("onload",hiNumberedText);
   }

表示部からコピペすることも可能です。行番号はコピーされません。
このプログラム自体もこのツールを使って表示させており、 しかも確認のため一旦このページに表示させたものをコピペして 作成し直した.jsとなっています。