为什么我的React代码编辑器组件无法被PrismJs高亮？

PrismJS 代码高亮失效的常见遗漏配置： #

• 未引入Prism配套的主题样式文件
  Prism的高亮样式依赖独立的CSS主题实现，仅导入JS核心包不会渲染高亮效果，需要在组件顶部导入对应主题CSS：

// 可替换为prism/themes目录下的其他主题，比如prism-tomorrow.min.css、prism-dark.min.css等
import "prismjs/themes/prism.min.css";

• 未引入对应编程语言的语法解析包
  如果使用的是Prism核心版本，默认不会内置所有语言的语法规则，需要手动引入你用到的JavaScript解析包：

import "prismjs/components/prism-javascript.min.js";

• 高亮执行时机早于React DOM更新
  你当前的useEffect触发时，React可能还没将最新的content渲染到<code>标签内，导致Prism拿到的是旧内容进行解析，调整执行逻辑等待DOM更新完成后再执行高亮即可：

// 替换原来监听content的useEffect
useEffect(() => {
  // 加0延迟等待React完成DOM渲染
  setTimeout(() => {
    Prism.highlightAll();
  }, 0);
}, [content]);

如果要更精准控制、避免全局扫描影响性能，也可以直接指定要高亮的元素：

useEffect(() => {
  const codeEl = document.querySelector('.codeOutput code');
  if (codeEl) {
    Prism.highlightElement(codeEl);
  }
}, [content]);

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