Tiptap调用getHTML()时丢失代码块内的hljs span标签问题

这是因为CodeBlockLowlight默认只在编辑器渲染时动态生成高亮span标签，序列化HTML（getHTML()）时只会保留代码块的基础结构（pre+code），不会把高亮的span标签包含进去。要解决这个问题，你需要自定义它的HTML序列化逻辑，让getHTML()输出带高亮标签的完整代码。

具体步骤如下：

1. 确保已正确导入lowlight：

import { lowlight } from 'lowlight'

2. 修改CodeBlockLowlight的配置，重写renderHTML方法，让它在序列化时直接生成带高亮的HTML：

CodeBlockLowlight.configure({
  lowlight,
  // 自定义HTML渲染/序列化逻辑
  renderHTML({ node, HTMLAttributes }) {
    // 获取代码块指定的语言，默认用plaintext
    const language = node.attrs.language || 'plaintext'
    // 获取代码块的原始内容
    const codeContent = node.textContent
    // 用lowlight生成带高亮span标签的HTML字符串
    const highlightedCode = lowlight.highlight(language, codeContent).value

    return [
      'pre',
      HTMLAttributes,
      ['code', { class: `language-${language}` }, highlightedCode],
    ]
  },
}),

这样调用getHTML()时，就能得到包含<span class="hljs-keyword">这类高亮标签的完整HTML内容了。

另外补充：如果你的需求是保存纯净代码，在前端展示时再做高亮，其实没必要存储带span的HTML——只需要保存带language类的pre+code结构即可，展示页面再用lowlight重新解析代码高亮，这样还能减少存储体积。但如果确实需要把高亮标签一起存入，上面的方法就完全适用。

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