Highlight.js在WordPress编辑器中更新后移除core/code块换行问题求助

问题背景 #

在WordPress区块编辑器中，core/code块依赖<br data-rich-text-line-break="true">标签实现换行，但执行highlight.js代码高亮后，这些<br>标签会被移除，导致代码格式错乱。

更新前效果 #

• 编辑器内显示：
  
• 对应HTML结构：
  

更新后效果（执行highlight.js后） #

• 编辑器内显示（换行丢失）：
  
• 对应HTML结构（
  标签被移除）：
  

已尝试无效方案 #

曾尝试配置highlight.js的ignoreUnescapedHTML选项，但未生效，代码如下：

// 尝试忽略转义后的<br>字符实体
hljs.configure({
  ignoreUnescapedHTML: /&lt;br\/?&gt;/i, // 匹配转义后的<br>字符
});

问题原因分析 #

根据highlight.js官方文档（翻译）：

ignoreUnescapedHTML 用于指定正则表达式，匹配原生未转义的HTML标签/内容，处理代码时会跳过这些内容，不转义也不移除。但该选项不作用于转义后的字符实体（如<br>）。

而core/code块中的换行是原生<br data-rich-text-line-break="true">标签，并非转义后的字符实体，因此原正则无法匹配到目标内容。

正确解决方案 #

1. 修正highlight.js配置 #

调整ignoreUnescapedHTML的正则，匹配所有带属性或不带属性的<br>标签：

hljs.configure({
  ignoreUnescapedHTML: /<br[^>]*>/i // 匹配任意形式的<br>标签（含自定义属性）
});

2. 确保高亮时机正确 #

需要在core/code块更新完成后再执行highlight.js，可通过WordPress的编辑器事件监听实现：

wp.domReady(() => {
  // 初始化高亮所有code块
  const highlightCodeBlocks = () => {
    document.querySelectorAll('pre.wp-block-code code').forEach(block => {
      hljs.highlightElement(block);
    });
  };

  highlightCodeBlocks();

  // 监听编辑器内容更新，重新高亮code块
  wp.data.subscribe(() => {
    // 延迟执行确保DOM已更新
    setTimeout(highlightCodeBlocks, 100);
  });
});

效果验证 #

配置完成后，highlight.js会保留core/code块中的<br data-rich-text-line-break="true">标签，代码换行格式与编辑器原生状态一致。

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