在WordPress文章中展示代码的正确方法

作为开发者或技术博主，经常需要在文章中分享代码片段。如果直接粘贴，WordPress可能会尝试渲染这些代码，导致页面错乱或安全风险。因此，掌握正确的代码展示方法至关重要。本文将介绍几种在WordPress文章中嵌入代码的方式，包括原生HTML标签、插件辅助以及古腾堡编辑器的内置功能。

方法一：使用<pre>和<code>标签

HTML提供了专门的标签用于展示代码：<pre> 和 <code>。通常组合使用：

<pre>
    <code>
        // 你的代码
        function hello() {
            console.log("Hello, world!");
        }
    </code>
</pre>

注意：在代码中如果包含HTML标签（如<div>），必须将<替换为&lt;，>替换为&gt;，否则会被浏览器解析。例如展示一个div标签：

<div>这是一个被转义的div</div>

方法二：在古腾堡编辑器中使用“代码”块

WordPress 5.0+ 的古腾堡编辑器提供了专门的“代码”块。你只需添加“代码”块，粘贴代码，编辑器会自动处理部分转义。但要注意：对于包含HTML/JS的复杂代码，依然需要手动将尖括号转换为HTML实体，或者借助插件增强显示效果。

方法三：使用代码高亮插件

推荐使用以下插件简化流程并增加美观度：

• Enlighter：支持多种语言，自动高亮，提供主题选择。
• Prism Syntax Highlighter：轻量级，基于Prism.js。
• Crayon Syntax Highlighter：老牌插件，功能丰富。

这些插件通常提供简码或古腾堡块，你只需要将代码放入，插件会自动转义并高亮。例如使用Enlighter的简码：[enlighter lang="php"] $var = "Hello"; [/enlighter] 。

手动转义工具

如果你不想用插件，可以借助在线工具将代码转义为HTML实体，然后再粘贴到WordPress的HTML/文本视图中。例如：FreeFormatter HTML Escape（真实可用）。

注意事项

• 在经典编辑器的“文本”模式下直接编写代码，确保尖括号被正确转义。
• 测试代码显示效果，避免换行丢失。<pre>标签会保留空格和换行，是代码块的最佳搭档。
• 安全性：不要执行未经验证的用户提交代码，展示代码时仅作展示用途。
• WordPress偶尔会智能地格式化内容，若发现代码被破坏，请检查是否切换到了“可视化”标签并重新切换回“文本”标签。

总结

在WordPress中展示代码并不复杂，关键在于转义特殊字符和选择合适的工具。无论是手动方法还是插件，都能帮助读者清晰地阅读和理解代码。希望本文能帮助你在技术博客中更专业地分享代码片段。