告别低效！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>

标签内的代码内容（不包含块注释），执行以下替换：

查找：`<` → 替换为：`&lt;`
查找：`>` → 替换为：`&gt;`
查找：`&` → 替换为：`&amp;`

– （注意：勾选“区分大小写”，避免误转义块注释中的字符）

五、替换后效果对比

替换前（报错）：

<!-- 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 &lt;- t.Value // 转义后正确解析
}
</pre>
<!-- /wp:syntaxhighlighter/code -->

六、重要注意事项

1. 仅转义代码内容，不转义块注释！（即不要转义

<!– wp:… –>

标签中的任何字符）

2. 前端显示正常： 虽然代码中显示为 <，但发布后浏览器会自动渲染为 <，读者看到的是正确代码。

3. 效率提升： 相比手动调整每个代码块（5-10 分钟/10 个块），本方案仅需 30 秒/10 个块。

七、总结与建议

1. 从手动到自动的质变： 通过记事本批量替换，彻底解决了报错问题，同时大幅提升了处理效率。

2. 推荐工作流： 建议保存替换模板到记事本中，每次写博客时直接粘贴模板，按步骤操作即可。

3. 适用场景： 特别适合技术博主撰写包含大量代码块的文章。 希望这个方案能帮你摆脱繁琐的手动操作，让博客写作更高效！