React.js中使用Highlight.js语法高亮失效问题求助

你的问题核心在于React默认会转义插入的字符串内容：hljs.highlightAuto(test).value返回的是带有高亮span标签的HTML字符串，但直接放在JSX里会被当成纯文本渲染，不会解析成实际的DOM元素，自然看不到高亮效果。

修复方案 #

1. 使用React的dangerouslySetInnerHTML属性插入原始HTML内容
2. 必须引入highlight.js的样式文件（否则即使生成了span标签，也没有高亮样式）

修改后的代码如下：

import React from "react";
import hljs from "highlight.js";
// 引入高亮样式，这里用github主题，可替换成其他主题如monokai、atom-one-dark等
import "highlight.js/styles/github.css";

const test = `const test = require('test')`;
const highlightedCode = hljs.highlightAuto(test).value;

function App() {
  return (
    <>
      <pre>
        <code dangerouslySetInnerHTML={{ __html: highlightedCode }} />
      </pre>
    </>
  );
}

export default App;

额外提示 #

• dangerouslySetInnerHTML是React专门用于插入原始HTML的属性，命名里的"dangerously"是提醒你：确保插入的HTML内容是安全的（避免XSS风险）。
• 如果明确知道代码的语言类型，建议用hljs.highlight指定语言（比如hljs.highlight(test, { language: 'javascript' })），比highlightAuto的识别更准确。

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