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

我宁愿使用CSS：

，而不是将每一行包裹在<code>元素中

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

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>";

如何使用jQuery为代码块添加行号？

2 个答案: