告别低效！WordPress 代码块自动化处理方案：从手动调整到报错解决，一篇文章全搞定！
在撰写技术博客时，代码块的正确显示至关重要。近期，我在使用 WordPress Gutenberg 编辑器处理代码块时遇到了效率低下的问题，并苦苦寻找更优解法。经过反复摸索，我终于总结出一套 「从手动到自动」的完整方案，既能解决报错问题，又能大幅提升效率。现将我的经验和解决方案分享出来，如果你也在为代码块处理烦恼，不妨一试！以前的方案：解决 WordPress Gutenberg 多 Shortcode 解析不稳定问题的实践记录
一、当前方案：低效但可行的“手动三步法”
目前，我处理代码块的流程是：
1. 第一步：粘贴
[go][/go]
简码
在可视化编辑器中，先粘贴
[go]你的代码块内容[/go]
。编辑器会自动将其转换为预定义的简码块（如 <!-- wp:shortcode --> 块）。
2. 第二步：手动删除简码块（如图1），替换为 SyntaxHighlighter 块
找到刚刚转换的 <!-- wp:shortcode --> 块，手动删除它，然后替换为（如图2）：
<!-- wp:syntaxhighlighter/code {"language":"go"} -->
<pre class="wp-block-syntaxhighlighter-code">你的代码块内容</pre>
<!-- /wp:syntaxhighlighter/code -->
3. 第三步：调整语言属性
如果需要语法高亮，不是默认的 Plain Text，还需手动添加 {"language":"go"} 等属性。
问题：效率极低，尤其当文章包含多个代码块时
如果一篇文章有 10 个以上代码块，重复执行上述三步操作将耗费大量时间，且容易出错。我急需更高效的方法。
二、探索与挫折：直接粘贴代码却遭遇报错
为了提升效率，我尝试参考代码编辑器中的 <!-- wp:syntaxhighlighter/code --> 块（如图3）。例如：
<!-- wp:syntaxhighlighter/code {"language":"go"} -->
<pre class="wp-block-syntaxhighlighter-code">
// Walk 中序遍历树 t
func Walk(t *tree.Tree, ch chan int) {
ch <- t.Value // 这里包含 < 符号！
}
</pre>
<!-- /wp:syntaxhighlighter/code -->
然而，当代码中包含 未转义的 `<` 或 `>` 符号（如 `ch <- t.Value` 中的 `<`）时，编辑器会报错：
区块包含未预料的或无效的内容（如图4）
原因：WordPress 将 `<` 或 `>` 误判为 HTML 标签，导致解析失败。
三、核心解决方案：自动化转义工作流
经过多次测试，我找到了一个 “零手动转义”的自动化方案，完美解决了报错和效率问题。核心思路是：使用记事本（EditPlus）批量替换代码中的特殊字符，同时保持块注释语法不变。
四、详细操作步骤（全程在记事本中完成）
1. 步骤 1：在记事本中编写原始内容
使用自定义标记（如 text、go）分隔代码块，保持原始代码格式：
我正在学习 Go 语言的并发编程。
[text]
# 检查ufw是否在运行
root@wireguard-2026-0509:~# ufw status
Status: inactive
[/text]
[go]
// Walk 中序遍历树 t
func Walk(t *tree.Tree, ch chan int) {
ch <- t.Value // 这里包含 < 符号！
}
[/go]2. 步骤 2：批量替换标记为代码块模板
替换 `[text]` 为：
<!– wp:syntaxhighlighter/code –>
<pre class=”wp-block-syntaxhighlighter-code”>
替换 `[/text]` 为：
</pre>
<!– /wp:syntaxhighlighter/code –>
替换 `[go]` 为：
<!– wp:syntaxhighlighter/code {“language”:”go”} –>
<pre class=”wp-block-syntaxhighlighter-code”>
替换 `[/go]` 为：
</pre>
<!– /wp:syntaxhighlighter/code –>
3. 步骤 3：精准转义代码内容中的特殊字符（如图5）
– 关键技巧： 仅选中
<pre>
标签内的代码内容（不包含块注释），执行以下替换：
查找：`<` → 替换为：`<`
查找：`>` → 替换为：`>`
查找：`&` → 替换为：`&`
– （注意：勾选“区分大小写”，避免误转义块注释中的字符）
五、替换后效果对比
替换前（报错）：
<!-- wp:syntaxhighlighter/code {"language":"go"} -->
<pre class="wp-block-syntaxhighlighter-code">
func Walk(t *tree.Tree, ch chan int) {
ch <- t.Value // 报错！
}
</pre>
<!-- /wp:syntaxhighlighter/code -->
替换后（正确显示）（如图6）：
<!-- wp:syntaxhighlighter/code {"language":"go"} -->
<pre class="wp-block-syntaxhighlighter-code">
func Walk(t *tree.Tree, ch chan int) {
ch <- t.Value // 转义后正确解析
}
</pre>
<!-- /wp:syntaxhighlighter/code -->
六、重要注意事项
1. 仅转义代码内容，不转义块注释！（即不要转义
<!– wp:… –>
标签中的任何字符）
2. 前端显示正常： 虽然代码中显示为 <，但发布后浏览器会自动渲染为 <，读者看到的是正确代码。
3. 效率提升： 相比手动调整每个代码块（5-10 分钟/10 个块），本方案仅需 30 秒/10 个块。
七、总结与建议
1. 从手动到自动的质变： 通过记事本批量替换，彻底解决了报错问题，同时大幅提升了处理效率。
2. 推荐工作流： 建议保存替换模板到记事本中，每次写博客时直接粘贴模板，按步骤操作即可。
3. 适用场景： 特别适合技术博主撰写包含大量代码块的文章。 希望这个方案能帮你摆脱繁琐的手动操作，让博客写作更高效！
