使用 JavaScript 突出显示代码示例中的语法

Using javascript to highlight syntax in code examples.

本文关键字：语法 代码 JavaScript 显示 使用      更新时间：2023-09-26

所以，我正在寻找如何做一些类似于Stackoverflow的代码的事情：

例如，"

var"是彩色的，而"test"不是

var test

我将如何编写一个 JavaScript 函数来做到这一点？

这就是我尝试过的

if ("var")  {
document.getElementByTagName("code").style.color="purple";
}

因此，当文本"var"位于"代码"元素中时，它会变成"var"紫色。

我会将变量名称包装在一个范围内

<code>
  var <span class="variable-name">test</span>
</code>

然后只对跨度进行着色，jQuery使这更容易

$('code span.variable-name').css('color', 'purple');

但是，也有语法突出显示库可以使整个事情变得更容易，因为它在很大程度上是一个已解决的问题:)这是一个例子

这是一种快速而肮脏（强调肮脏）的方法，如果出现以下情况，请使用正则表达式替换：

  1. 你不关心实际解析语法
  2. 您知道代码元素只包含干净的文本，没有子标记

如果是这样，您可以执行以下操作：

var els = document.getElementsByTagName('code'),
    code;
for (var i = 0; i < els.length; i++) {
    code = els[i].innerHTML;
    els[i].innerHTML = code.replace(
        /'bvar'b/g,
        '<span style="color: #f00;">var</span>'
    );
}

是的，最好使用类而不是内联样式，但是看到不遵循上述两点也是不好的做法，这只是为了举例说明。

查看演示

HTML 和 js 元素 

 <div>
   var test;
 </div>

<script>
 var varText = $( "div" ).text().split( " " ).join( "</span> <span>" );
 newText = "<span>" + varText + "</span>";
$( "div" )
.html( varText )
.find( "span" )
.end()
.find( ":contains('var')" )
.css({
  "color": "purple",
});

相关文章：