用纯Js原生方式实现代码高亮

要实现代码高亮，可以使用纯JavaScript原生方式来处理。以下是一个简单的示例：

HTML部分：

<pre id="code" class="highlight">
  <code>
    // 这是一段示例代码
    function helloWorld() {
      console.log("Hello, World!");
    }
    helloWorld();
  </code>
</pre>

CSS部分：

.highlight {
  background-color: #f4f4f4;
  padding: 10px;
}

.keyword {
  color: blue;
}

.function {
  color: purple;
}

.comment {
  color: green;
}

JavaScript部分：

window.onload = function() {
  var codeElement = document.getElementById("code");
  var code = codeElement.innerText;

  // 使用正则表达式匹配代码中的关键字、函数和注释
  var keywords = ["function", "if", "else", "for", "while"];
  var functions = ["console.log", "alert"];
  var comments = ["//"];

  var keywordRegex = new RegExp("\\b(" + keywords.join("|") + ")\\b", "g");
  var functionRegex = new RegExp("\\b(" + functions.join("|") + ")\\b", "g");
  var commentRegex = new RegExp("(" + comments.join("|") + ".*)", "g");

  // 根据匹配结果，添加相应的样式类
  code = code.replace(keywordRegex, "<span class='keyword'>$1</span>");
  code = code.replace(functionRegex, "<span class='function'>$1</span>");
  code = code.replace(commentRegex, "<span class='comment'>$1</span>");

  // 更新pre元素的innerHTML
  codeElement.innerHTML = code;
};

在上述示例中，首先通过document.getElementById("code")获取到代码块的元素，然后使用innerText获取到代码块的文本内容。接着使用正则表达式匹配关键字、函数和注释，并使用replace方法将匹配到的内容用<span>元素包裹起来，并添加对应的样式类。最后，通过设置元素的innerHTML来更新代码块的内容，实现代码高亮效果。

注意，上述示例中的正则表达式和样式类名仅作为示例，实际应用中可能需要根据具体需求进行调整