如何在Node.js脚本中结合JSDom使用Highlight.js实现代码高亮？

我来帮你搞定这个问题！之前我也踩过类似的坑，给你一套靠谱的实操方案：

第一步：先把依赖装对 #

首先确保你已经安装了jsdom和highlight.js这两个包，终端里跑这个命令：

npm install jsdom highlight.js

第二步：编写正确的处理脚本 #

核心思路是：用JSDom解析HTML，在Node端直接调用Highlight.js的API处理代码块，再把高亮后的内容写回DOM，最后输出处理后的HTML。

完整示例代码如下：

const { JSDOM } = require('jsdom');
const hljs = require('highlight.js');

// 示例HTML（替换成你自己的内容）
const rawHtml = `
<!DOCTYPE html>
<html>
<head>
  <title>代码高亮测试</title>
</head>
<body>
  <h2>JavaScript代码示例</h2>
  <pre><code class="language-javascript">function calculateSum(a, b) {
  return a + b;
}
console.log(calculateSum(5, 3));
</code></pre>
  
  <h2>Python代码示例</h2>
  <pre><code class="language-python">def calculate_sum(a, b):
    return a + b

print(calculate_sum(5, 3))
</code></pre>
</body>
</html>
`;

// 创建JSDom实例，配置无需过度复杂
const dom = new JSDOM(rawHtml);
const { document } = dom.window;

// 关键：选择所有带language-前缀类的code元素
const codeBlocks = document.querySelectorAll('code[class^="language-"]');

// 逐个处理代码块
codeBlocks.forEach(block => {
  // 自动识别语言并高亮，这是最省心的方式
  hljs.highlightElement(block);
  
  // 如果你需要手动指定语言（比如自动识别不准时），可以用下面的写法：
  // const highlightResult = hljs.highlight(block.textContent, { 
  //   language: 'javascript' // 替换成对应语言
  // });
  // block.innerHTML = highlightResult.value;
});

// 可选：添加Highlight.js的样式（让前端展示时有高亮效果）
const styleLink = document.createElement('link');
styleLink.rel = 'stylesheet';
// 这里用github主题，你可以换成其他主题，比如monokai、atom-one-dark等
styleLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css';
document.head.appendChild(styleLink);

// 输出处理后的完整HTML
console.log(dom.serialize());

常见坑点排查 #

• 忘记加语言类：一定要给code元素加上language-xxx的类（比如language-javascript），否则Highlight.js无法识别语言类型，只会做普通格式化。
• 语言包缺失：Highlight.js默认支持大部分主流语言，但如果用到冷门语言（比如Go、Rust），需要单独引入对应的语言包并注册：

  const rust = require('highlight.js/lib/languages/rust');
  hljs.registerLanguage('rust', rust);
  

• 错误在JSDom里跑Highlight.js脚本：不要尝试在JSDom的页面里加载Highlight.js的CDN脚本，Node端直接调用API更可靠，避免JSDom的环境限制问题。
• 没序列化输出：处理完代码块后，一定要用dom.serialize()来输出完整的HTML，否则你看不到高亮后的结果。

内容的提问来源于stack exchange，提问作者Ole