使用WordPress作为Next.js无头CMS时文章代码高亮失效问题求助

你当前直接通过dangerouslySetInnerHTML渲染WordPress返回的HTML内容时，没有对内部的<pre><code>标签做语法高亮处理，因此没有高亮效果，可采用以下两种可行方案实现需求：

方案1：Prism.js 客户端高亮（轻量易实现，适配你需要的效果） #

Prism.js是你参考的示例站点使用的高亮方案，配置步骤如下：

1. 安装依赖

npm install prismjs

2. 导入依赖与主题
   在你的文章页面顶部添加导入代码，可按需选择主题和需要支持的编程语言：

import { useEffect } from 'react'
import Prism from 'prismjs'
// 导入高亮主题，可选prism-github.css、prism-okaidia.css等官方主题
import 'prismjs/themes/prism-tomorrow.css'
// 导入需要支持的编程语言包
import 'prismjs/components/prism-javascript'
import 'prismjs/components/prism-html'
import 'prismjs/components/prism-css'
import 'prismjs/components/prism-python'

3. 挂载后执行高亮
   在Post组件内部添加useEffect钩子，文章内容加载完成后自动触发高亮：

export default function Post({ postData }) {
  // ... 原有代码
  useEffect(() => {
    Prism.highlightAll()
  }, [postData])
  // ... 原有return渲染代码
}

方案2：HTML解析后自定义渲染（更安全灵活） #

如果担心直接使用dangerouslySetInnerHTML存在XSS风险，可先解析HTML为React节点，单独对代码块做高亮处理：

1. 额外安装HTML解析依赖

npm install html-react-parser prismjs

2. 替换原有渲染逻辑
   把原来用dangerouslySetInnerHTML渲染内容的部分替换为如下代码：

import parse from 'html-react-parser'

// ... 组件内部渲染部分
<div
  className="text-justify p-5"
>
  {parse(postData.content, {
    replace: (domNode) => {
      // 匹配<pre>下的<code>标签
      if (domNode.name === 'code' && domNode.parent?.name === 'pre') {
        // 读取代码块语言类名
        const lang = domNode.attribs.class?.replace('lang-', '') || 'javascript'
        const rawCode = domNode.children[0]?.data || ''
        // 生成高亮后的代码
        const highlightedCode = Prism.highlight(rawCode, Prism.languages[lang], lang)
        return <pre><code 
          className={`language-${lang}`} 
          dangerouslySetInnerHTML={{ __html: highlightedCode }} 
        /></pre>
      }
    }
  })}
</div>

注意事项 #

• 如果你使用WordPress古腾堡编辑器的代码块发布内容，输出的<code>标签会自动携带lang-xxx类名，Prism可直接识别语言
• 若使用Next.js 13+ App Router版本，需在组件顶部添加'use client'标记，确保客户端钩子正常生效
• 主题CSS可统一在_app.js中全局导入，全站所有文章均可复用

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