HTML-如何在没有硬编码的情况下将 标记插入<pre> </ pre>块的每一行？

debugcn 发表于 Dev

郝黄

我只是想在使用CSS的源代码开头添加行号。我意识到我想要的效果，如下所示：

但是，HTML代码需要持续使用...标签：

<pre class="code">
  <span>var links = document.getElementsByClassName("link");</span>
  <span>for(var i = 0; i &lt; links.length; i++){</span>
  <span>  links[i].onclick=function(){</span>
  <span>   alert(i+1);</span>
  <span>  };</span>
  <span>}</span>
</pre>

通过将span标签放置在行的起始/结尾，我可以让行号按预期显示。但是我认为必须有另一个更好的解决方案，以防止我添加所有这些span硬编码的标签，也许是使用Javascript或jQuery，我不介意但不知道如何。请帮忙。

注意：
我的问题不是当标签已经存在时如何显示行号。相反，我想知道原始HTML代码是否包含NO标签，如何将它们自动添加到合适的位置，以便可以应用CSS样式。

l1em1on1

我已将@Stewartside答案与您实际要求的内容结合在一起。

在下面，您可以看到一个简单的普通JavaScript，它将元素中的任何行替换为使用@Stewartside css封装在span中的代码类。

var codeElement = document.getElementsByClassName("code"); //array of code blocks
var formattedCode = codeElement[0].textContent.replace("\r\n", "\n").split("\n");
var codeLength = formattedCode.length;
formattedCode.forEach(function(line, index, array) {
  if (codeLength - 1 == index) return; 
  array[index] = "<span>" + line + "</span>";
});

codeElement[0].innerHTML = formattedCode.join("\n");

$(".code-jquery").each(function(index, codeElement) {
  var formattedCode = $(codeElement).html().replace("\r\n", "\n").split("\n");
  
  var codeLength = formattedCode.length;
  $(codeElement).text("");
  $.each(formattedCode, function(index, line) {
    if (codeLength - 1 == index) return;
    $(codeElement).append("<span>" + line + "</span>\n")
  });
});

pre {
  background: #eee;
  counter-reset: section; /* Reset the counter to 0 for each new pre */
}
pre span:before {
  counter-increment: section; /* Increment the section counter*/
  content: counter(section); /* Display the counter */
  padding: 0 5px;
  border-right: 1px solid #777;
  margin-right: 5px;
  color: #777
}

pre.code-jquery span {
  color: green;
}

<pre class="code">
  var links = document.getElementsByClassName("link");
  for(var i = 0; i &lt; links.length; i++) {
    links[i].onclick = function() {
    	alert(i+1);
  	};
  }
</pre>

//jQuery version
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre class="code-jquery">
  var links = document.getElementsByClassName("link");
  for(var i = 0; i &lt; links.length; i++) {
    links[i].onclick = function() {
    	alert(i+1);
  	};
  }
</pre>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。