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>');​

demonstration

---

而不是将每一行包装在 <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;
}

Demonstration