如何在React项目中手动触发Prism.js代码高亮？

要实现手动触发Prism.js的代码高亮，核心是两步操作：禁用Prism的自动初始化逻辑，再通过React的ref获取代码块元素并调用高亮方法。

步骤1：禁用Prism自动高亮 #

导入Prism.js后，立即设置Prism.manual = true，阻止它自动扫描并高亮页面中的代码块：

import React from "react";
import Prism from "prismjs";
import "prismjs/themes/prism-tomorrow.css";

// 关闭自动高亮
Prism.manual = true;

步骤2：手动触发高亮 #

通过React的useRef获取代码块元素，再调用Prism的highlightElement方法完成高亮。你可以选择在组件挂载时自动执行，或者通过按钮点击等交互事件触发。

示例1：组件挂载时自动触发高亮

import React, { useEffect, useRef } from "react";
import Prism from "prismjs";
import "prismjs/themes/prism-tomorrow.css";

Prism.manual = true;

const code = `const App = props => {
  return (
    <div>
      <h1> React App </h1>
      <div>Awesome code</div>
    </div>
  );
};
`;

export default function App() {
  const codeRef = useRef(null);

  useEffect(() => {
    // 组件挂载后手动高亮代码块
    if (codeRef.current) {
      Prism.highlightElement(codeRef.current);
    }
  }, []);

  return (
    <pre>
      <code ref={codeRef} className="language-javascript">{code}</code>
    </pre>
  );
}

示例2：通过按钮点击触发高亮

import React, { useRef } from "react";
import Prism from "prismjs";
import "prismjs/themes/prism-tomorrow.css";

Prism.manual = true;

const code = `const App = props => {
  return (
    <div>
      <h1> React App </h1>
      <div>Awesome code</div>
    </div>
  );
};
`;

export default function App() {
  const codeRef = useRef(null);

  const handleHighlight = () => {
    if (codeRef.current) {
      Prism.highlightElement(codeRef.current);
    }
  };

  return (
    <div>
      <button onClick={handleHighlight}>高亮代码</button>
      <pre>
        <code ref={codeRef} className="language-javascript">{code}</code>
      </pre>
    </div>
  );
}

额外提示 #

如果代码内容是动态更新的，需要在useEffect中监听code的变化，每当内容更新时重新调用高亮方法：

useEffect(() => {
  if (codeRef.current) {
    Prism.highlightElement(codeRef.current);
  }
}, [code]);

同时要确保代码块的className正确设置为对应语言（比如language-javascript），Prism需要依靠这个类识别语法类型。

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