如何在 WordPress 中显示代码 - 3 种方法（有和没有插件）

您想在您的网站上显示一些代码，但不确定最好的方法吗？ 这篇文章是给你的。 在本指南中，我们将向您展示在 WordPress 中轻松显示代码的不同方法。

为什么在 WordPress 中显示代码很困难？

如果您有一个向用户发布有用指南的网站，您可能需要在博客文章中展示代码片段。 问题是它不像粘贴代码那么简单。 实际上，例如，如果您将 HTML 片段粘贴到您的博客文章中，它将无法正常工作。 如您所知，WordPress 文本编辑器是基于 HTML 的编辑器，因此它会自动处理代码并打印出来。

同样，如果您复制并粘贴简码，WordPress 将显示该功能，而不是简单地显示写入的简码。

如果您想显示代码并且可能导致格式不佳，这并不理想。 例如，如果您想通过 WordPress 经典编辑器在您的文章中嵌入一些 HTML 代码，编辑器将处理这些代码并将其显示在内容中。

解决此问题的最佳方法是为您的代码片段使用专用样式。 这就是我们将在本文中向您展示的内容。

如何在 WordPress 中显示代码

在 WordPress 中显示代码有 3 种主要方法：

1. 使用 WordPress 编辑器
   1. 古腾堡
   2. 经典编辑器
2. 使用专用的 WordPress 插件
3. 手动插入代码

让我们看一下每种方法，并逐步向您展示如何在您的网站上显示代码。

1) 使用 WordPress 编辑器

在 WordPress 中显示代码的最简单方法是使用 WordPress 编辑器。 在本节中，我们将向您展示如何同时使用 Gutenberg 和 Classic Editor。

1.1) 古腾堡

首先，登录您的 WordPress 网站并打开要显示代码的帖子。 搜索一个名为Code的块并选择它。

您可以在那里开始编写代码，完成后发布帖子。 在前端，您将看到代码。

这就是您可以使用 Gutenberg 编辑器在您的网站上显示代码的方式。

1.2) 经典编辑器

如果您仍在使用经典编辑器，您还可以使用预格式化文本选项显示代码片段。 首先，使用经典编辑器打开要包含代码的帖子。

然后，选择代码片段并从下拉列表中选择预格式化文本选项。

你会看到文本是如何变化的。 然后，发布文章并从前端检查页面，您将在自定义框中看到代码，如下所示。

这样，您可以在 WordPress 网站上显示任何代码。

如您所见，使用 WordPress 编辑器简单明了。 但是，如果您想要更多选项来显示不同类型的代码，则需要其他东西。

2) 使用 WordPress 插件显示代码

在 WordPress 中显示代码的另一种方法是使用专用插件。 那里有很多选择，但对于这个演示，我们将使用一个名为 SyntaxHighighter Evolved 的免费工具。

首先，您需要安装插件，因此登录到您的站点后，转到Plugins > Add New 。 搜索 SyntaxHighlighter Evolved 插件，安装并激活它。

在 WordPress 设置部分下，您将看到插件的配置选项。

在插件的设置页面上，您将看到几个自定义选项：

• 版本控制
• 颜色主题
• 画笔加载
• 各种各样的
• 额外的 CSS 类
• 起始行号
• 行号填充
• 标签大小
• 标题

如果您是基本用户，默认配置就足够了，而如果您是高级用户，您可能需要查看设置并根据需要进行调整。 更改设置后，保存更改。 在实时预览部分下，您将看到一个带有高亮效果的示例代码。

此时，该过程会因您使用的编辑器而异。 让我们看看两者。

2.1) 古腾堡编辑器

激活插件后，您将在编辑器中看到一个名为SyntaxHighlighter Code的新块。

您可以使用该块在帖子中显示不同类型的代码。 只需选择块，然后在设置面板中，您将看到选择要显示的语言的选项。 您会看到有几十种语言可供您选择。

在本例中，我们将显示一个 CSS 代码片段，因此我们将从下拉列表中选择 CSS。

您还可以从块部分更改代码语言。

选择代码语言后，将脚本粘贴到块中。

此外，您可以从右侧面板的“高级”部分调整插件的默认设置并更改样式。

完成后，发布（或更新）帖子并从前端检查帖子以查看结果。

正如你在上面的截图中看到的，我们已经成功地突出了我们帖子中的 CSS 代码。 这样，您只需从块设置中选择正确的代码语言，即可在 WordPress 中显示您想要的任何代码。

2.2) 经典编辑器

如果您不使用 Gutenberg 编辑器，则需要手动输入语言代码。 要使用经典编辑器显示 Syntaxhighlighter 代码，我们将使用简码。 如果您不熟悉短代码，我们建议您查看本指南。

首先，使用经典编辑器打开任何帖子或创建新帖子。 例如，要显示 HTML 内容，请使用[html] [/html]短代码并将代码粘贴在它们之间，如下所示并发布帖子。

[html]
<a href=”quadlayers.com”>QuadLayers</a>
[/html]

如果您从前端查看帖子，您将看到突出显示的 HTML 代码。

这是您可以使用 HTML 嵌入功能的方式，但您可以对任何其他代码语言执行相同的操作。 例如，要显示 PHP 片段，请使用[php] [/php]短代码、 [css] [/css]短代码来显示 CSS，等等。

这样，您可以修改短代码并显示您喜欢的任何代码片段。 让我们在一篇文章中展示一个示例 PHP 代码片段：

[php]
<?php
?>
[/php]

如您所见，您可以更改代码并在 WordPress 网站上显示任何片段。

注意：如果要更改代码的字体、字体大小和字体粗细，需要为 Syntaxhighlighter 插件添加自定义 CSS 类。 您可以从插件的设置中执行此操作，然后通过 WordPress 定制器或主题编辑器添加 CSS 代码来定制它。

3) 手动显示代码

如果您有编码技能，您可以手动在 WordPress 中显示代码。 这是一种更高级的方法，为您提供了很大的灵活性。 对于这个演示，我们将使用<pre>和<code>标签在帖子中显示代码。

首先，您需要使用外部工具将文本转换为 HTML。 我们将使用 MotherEff，但您可以使用您喜欢的任何其他 HTML 编码器。

然后，将您的 HTML 片段粘贴到解码框中，该工具将为您提供编码版本。

对于这个例子，我们的代码是：

 <p><a href="/quadlayers">访问我们的投资组合</a></p>

该工具将其转换为：

代码看起来不友好，但它会完成这项工作。

然后，在您的 WordPress 仪表板中打开经典编辑器并切换到文本编辑器。

使用<pre>和<code>打开标签和</code>和</pre>将编码的代码粘贴到那里以关闭它们。 例如，我们的示例代码将如下所示：

然后，发布帖子，在前端，您将看到突出显示的代码，如下所示。

这样，您可以在任何 WordPress 帖子中手动显示代码。

注意：Gutenberg 用户将无法使用此方法。 您只能使用经典编辑器执行此操作。

奖励：如何在段落中显示代码

除了在 WordPress 帖子中显示代码之外，另一个有趣的选择是在段落中显示代码。 在本节中，我们将向您展示如何做到这一点。 为此，我们将使用一些 CSS 和 HTML。

首先，您需要向您的网站添加一个简单的 CSS 代码。 您可以使用 WordPress 定制器或特定于站点的插件，例如代码片段。 对于这个演示，我们将转到外观 > 自定义 > 附加 CSS并将我们的代码粘贴到那里。

 代码 {
 字体大小：1.2em；
 颜色：#1e1e1e；
 位置：相对；
 边框半径：4px；
 背景：#e1e1e1
 } 

发布更改后，打开要编辑的任何帖子。 然后，选择要突出显示的内容。 例如，我们将在本段中将短语“开始博客”显示为代码。

切换到文本编辑器并将内容包装在<code>和</code>标记内。 按照我们的示例，我们的代码将如下所示：

<code>开始写博客</code>

然后，发布或更新更改并检查前端以查看更改。

这样，您可以突出显示特定的单词或句子。 如果您想修改代码的 CSS 样式，请随时编辑我们在此处使用的 CSS 脚本。

结论

总而言之，在您的网站上展示代码并不像粘贴脚本那么简单。 但是，在本指南中，我们向您展示了在 WordPress 中显示代码的不同方法：

1. 使用 WordPress 内容编辑器
2. 带有专用插件
3. 手动

如果您想要一个快速简单的解决方案，WordPress 内容编辑器为您提供了在任何帖子上展示脚本的工具。 但是，如果您需要更多自定义选项，SyntaxHighligher Evolved 插件是您的最佳选择。 另一方面，如果你有编码技能，你可以手动添加你的代码片段，并在前端使用一些 CSS 自定义样式。

最后，如果要突出显示段落中的特定句子或单词，可以将文本包装在<code> </code>标记中。

有关如何在您的网站上编辑代码的更多信息，请查看以下在 WordPress 中编辑 HTML 的指南。

你觉得这篇文章有帮助吗？ 您更喜欢哪种方法在您的网站上显示代码？ 在下面的评论部分让我们知道。