pre要素によって表現されるプログラムコードに行番号が欲しい場合があります。それを実現するためにわざわざtableを使ったりということになると、プログラムのコピー&ペーストが上手くできなくなるという問題が起こります。それを避けるため、あえてpre要素のままで改行コードを数えることによって行番号を付与します。

自動折り返しになっていると行番号がずれてしまいますので、注意が必要です。

※すいません、この例だとIEではうまくいかないですね…

【サンプル】

(function(name) {
  var nodeList = document.getElementsByTagName(name);
  var len = nodeList.length;
  for ( var i = 0; i < len; i++) {
    var node = nodeList.item(i);
    var text = node.textContent ? node.textContent : node.innerText;
    var linecount = text.split("\n").length;
    var linetext = "";
    for (var j = 1; j <= linecount; j++) {
      linetext += j + "<br/>";
    }
 
    var linenode = node.cloneNode(false);
    linenode.id = "linenumber";
    linenode.style.cssFloat = linenode.style.styleFloat = "left";
    linenode.style.border = "1px solid transparent";
    linenode.style.textAlign = "right";
    linenode.innerHTML = linetext;
    node.parentNode.insertBefore(linenode, node);
  }
})('pre');

【サンプルその１の実行】 → クリックすると、上のサンプルに行番号がつけられます。

• JavaScriptコードスニペット