如果您曾尝试在 WordPress 中共享代码片段，那么您可能很难让 WordPress 代码块出现在您的页面和帖子中。
您会很高兴知道这不是由于您的错误造成的。对于您的代码片段未呈现的原因，有两种解释：
- 如果您尝试在帖子正文中编写 HTML 标签，WordPress 会将这些解释为功能标签，而不是您希望显示的代码片段。例如，如果您在帖子中写“<em>example</em>”，WordPress 将显示“ example ”。
- 您不能在页面的源代码中插入 HTML 标记，因为 WordPress 会自动将它们过滤掉以作为安全预防措施。它可以防止黑客将代码注入帖子编辑器。
但是，有时您合法地需要在帖子中显示代码。例如，您可能会写关于编码的博客，或者您可能正在发布您开发的主题或插件的文档。无论出于何种原因，您都可以通过多种方式在WordPress 网站上显示代码。
如何在 WordPress 中添加代码块
在 WordPress 中显示代码有三个选项。如果您是不需要经常显示代码的初学者，则可以使用 Gutenberg 编辑器。您还可以使用插件来简化工作流程。或者，您可以手动将代码转换为称为 HTML 实体的特殊字符，推荐高级用户使用。
我们将在下面详细讨论这些过程中的每一个，以便您可以选择最能满足您的 WordPress 网站需求的方法。
如何使用古腾堡编辑器在 WordPress 中显示代码
如果您想以一种简单的方式在您的网站上显示代码并启用古腾堡编辑器，您可以将代码添加到您的页面或使用专用块发布。就是这样：
1.在您的 WordPress 仪表板中，单击帖子或页面。
2.选择新增或将鼠标悬停在现有帖子或页面上并选择编辑。
3.将光标放在要显示代码的位置。
4.单击添加块图标（加号）并搜索“代码”。选择出现的代码块。
或者，您可以键入“/code”并按回车键。
7.在块的文本区域中输入代码片段。
8.如果你预览帖子，你会看到代码显示在它自己的块中。
代码块预览古腾堡代码块在您网站上的外观会因您的 WordPress 主题而异。要修改其外观，您可以在侧边栏中编写自定义 CSS 来设置块的样式。选择块，然后在设置菜单中单击高级以显示自定义 CSS 字段。
但是请注意，Gutenberg 代码块不支持其他设置或格式样式。要获得更轻松、更灵活的工作流程，您可以使用 WordPress 插件添加代码块。
如何使用插件在 WordPress 中显示代码
与其他方法相比，使用插件有一些优势。首先，它允许您使用语法突出显示和行号显示任何编程语言的代码。访问者将能够更轻松地阅读和复制代码。
如果您经常在 WordPress 中显示代码块并且不想花时间添加代码块，那么插件对于您的工作流程也会更容易。
要显示语法高亮代码，您可以使用Syntax Highlighter Evolved 插件。它免费、简单，并且与经典编辑器和古腾堡编辑器兼容。
以下是使用古腾堡编辑器的步骤：
1.安装并激活Syntax Highlighter Evolved 插件。
2.激活后，转到仪表板中的设置>语法高亮显示。
3.查看并根据需要调整设置，然后单击“保存更改”。
4.从仪表板中选择帖子或页面。
5.选择新增或将鼠标悬停在现有帖子或页面上并选择编辑。
6.单击“添加块”图标并搜索“语法高亮代码”。
7.在代码块中输入您的代码。
8.从右栏中选择您的阻止设置。（单击右上角的齿轮图标以显示设置。）
- 选择代码的语言（默认为纯文本）。
- 打开或关闭行号。
- 如果显示行号，请选择编号开始的位置。
- 选择要突出显示的任何特定行。
- 切换 URL 是否可点击。
如果您使用的是经典编辑器，前四个步骤是相同的。进入要添加代码的帖子或页面后，单击文本选项卡切换到文本编辑模式。然后，只需用正确的语言短代码包装您的代码。一些最常用的短代码是：
- [html] [/html]
- [CSS][/CSS]
- [javascript][/javascript]
- [sql][/sql]
然后您可以保存并预览您的草稿，以查看代码将如何呈现给您网站上的访问者。下面是一些 CSS 代码如何在实际网站上显示的演示：
如何在 WordPress 中手动显示代码
如果您是更有经验的 WordPress 用户，您可能希望使用 HTML 实体手动编写代码。这是三者中最轻量级和最灵活的解决方案，但也是最困难的。
HTML 实体是一种编写 HTML 标记的独特方式，浏览器可以解释这些标记以正确显示字符。换句话说，它们允许您在网站上放置看起来像代码但行为不同的代码。
下面是一些最常见的 HTML 实体。要呈现使用这些字符中的任何一个的代码，请将左侧的字符与右侧的实体交换。
要了解如何使用实体来显示代码，让我们尝试显示一个演示 <em> HTML 标记的代码片段。
要显示代码<em>示例</em> 而不是实际将文本设为斜体，请首先确保您使用的是经典编辑器。在您的帖子中，从可视化编辑器切换到文本编辑器。在文本编辑器中，您将用 HTML 字符实体替换小于号和大于号。因此，您的代码片段现在将如下所示：<em>example</em>
最后，将代码段包裹在 <code></code> 标签中，然后包裹在 <pre></pre> 标签中以创建灰色块。这是它在编辑器中的样子：
保存您的更改，然后选择预览以查看代码如何显示在您网站前端的访问者面前。
如果您在这里或那里添加一行代码，则此方法很好。如果您正在寻找一种更简单的方法来编写和发布多行代码，您可以使用在线 HTML 实体编码器，如Web2.0Generators。只需输入您的代码并点击编码文本按钮。它会将您的代码转换为 HTML 实体，您可以将其添加到 <code></code> 标记之间。
正如您可能已经猜到的那样，您在站点上显示代码的频率越高，此选项的吸引力就越小。您需要探索其他两个选项来找到最适合您站点的解决方案。
在 WordPress 中显示代码。
与 WordPress 中的许多内容一样，向读者显示代码块的方法不止一种，最好的方法取决于您使用它的频率、您对代码的熟悉程度以及您是否愿意安装另一个插件。
无论您选择哪种方法，代码块都会将您的网络教程提升到一个新的水平，您的读者会很感激。
