javascript - jQuery を使用してコード ブロックに行番号を追加するにはどうすればよいですか?

Question

次の HTML マークアップがあるとします。

<div class="code">
<pre>
      int i = 1;
      int j = 2;
</pre>
</div>

jQueryを使用して、次のようなものにしたいと思います。

<table>
<tr><td>1</td><td><code>   int i = 1</code></td></tr>
<tr><td>2</td><td><code>   int j = 2</code></td></tr>
</table>

私は現在 SyntaxHighlighter を使用していますが、これは単純なニーズに対して複雑すぎるようです。

どうすれば簡単にできますか？

Answer 1

プラグインを使用することもできますが、単純なソリューションを非常に簡単に構築することもできます。

$('pre').html('<table>'+$.map($('pre').text().split('\n'), function(t, i){
    return '<tr><td>'+(i+1)+'</td><td><code>'+t+'</code></td></tr>';
}).join('')+'</table>');​

デモンストレーション

---

各行を<code>要素でラップする代わりに、CSS を使用することをお勧めします。

JavaScript :

$('pre').html('<table>'+$.map($('pre').text().split('\n'), function(t, i){
    return '<tr><td>'+(i+1)+'</td><td>'+t+'</td></tr>';
}).join('')+'</table>');​

CSS :

pre table {
    font-family : courier;
    padding: 2px;
}
pre table td:first-child {
    color:#777;
    border-right: 1px solid #ccc;
}

デモンストレーション

Answer 2

コード: jsfiddle . 改行文字を使用してテキスト全体を分割します。

var a = $("pre").text().split(/\n/g);
html = "<table>";
for(var k=0; k< a.length; k++){
    if($.trim(a[k]) != "" ){
  html += '<tr><td>'+ (k+1) +'</td><td><code>  ' +(a[k])+'</code></td></tr>';
    }
}
html +="</table>";

;