如何在WordPress中显示代码-3种方法(带和不带插件)

如何在WordPress中显示代码

您想在您的网站上显示一些代码,但不确定什么是最好的方法吗? 这篇文章是给你的。 在本指南中,我们将向您展示在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网站,然后在要显示代码的位置打开帖子。 搜索一个名为“代码”的块并选择它。

古腾堡代码块

您可以在此处开始编写代码,完成后,发布帖子。 在前端,您将看到代码。

古腾堡代码

这样便可以使用古腾堡(Gutenberg)编辑器在您的网站上显示代码。

1.2)经典编辑器

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

侧边栏CSS

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

预格式化文本

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

样本css

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

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

2)使用WordPress插件显示代码

在WordPress中显示代码的另一种方法是使用专用插件。 那里有很多选择,但是在本演示中,我们将使用一个免费工具,名为 语法高级演变

首先,您需要安装插件,因此在登录到您的站点后,转到“插件”>“添加新的”。 搜索SyntaxHighlighter Evolved插件,安装并激活它。

安装语法荧光笔的演变

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

在wordpress中显示代码-语法highlighter插件设置

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

  • 版本控制
  • 颜色主题
  • 刷子装载
  • 各种各样的
  • 其他CSS类
  • 起始行号
  • 行号填充
  • 标签尺寸
  • 标题

在wordpress中显示代码-语法highlighter插件设置

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

在wordpress中显示代码-代码预览

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

2.1)古腾堡编辑

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

在wordpress中显示代码-插件块

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

阻止设置

在此示例中,我们将显示CSS代码段,因此我们将从下拉列表中选择CSS。

CSS语言

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

语言

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

粘贴CSS代码

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

语法高亮演变的设置

完成后,发布(或更新)帖子并从前端检查该帖子以查看结果。

语法高亮插件gutenberg

如您在上面的屏幕截图中所见,我们已经成功地在帖子中突出显示了CSS代码。 这样,您只需在块设置中选择正确的代码语言即可显示WordPress中所需的任何代码。

2.2)经典编辑器

如果您不使用古腾堡(Gutenberg)编辑器,则需要手动输入语言代码。 要使用经典编辑器显示Syntaxhighlighter代码,我们将使用简码。 如果您不熟悉代码,建议您阅读本指南。

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

[html]
QuadLayers
[/html]

显示HTML代码

如果从前端检查帖子,则会看到突出显示的HTML代码。

在wordpress中显示代码-html代码段

这是您可以使用HTML嵌入功能的方法,但是您可以对其他任何代码语言执行相同的操作。 例如,要显示PHP代码段,请使用 [php] [/php] 简码, [css] [/css] 显示CSS的简码,依此类推。

这样,您可以修改简码并显示所需的任何代码段。 让我们在文章上显示示例PHP代码段:

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

php示例代码

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

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

3)手动显示代码

如果您具有编码技能,则可以在WordPress中手动显示代码。 这是一种更高级的方法,可为您提供极大的灵活性。 对于此演示,我们将使用

标记在帖子上显示代码。

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

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

HTML编码器

对于此示例,我们的代码是:

访问我们的产品组合

然后该工具将其转换为:HTML编码

该代码看起来并不友好,但是可以完成工作。

然后,在WordPress仪表板中,打开“经典”编辑器,然后切换到文本编辑器。

在WordPress中显示代码-通过文本编辑器手动显示

使用

打开标记以及将编码的代码粘贴到此处以将其关闭。 例如,我们的示例代码将如下所示:

在段落中添加代码

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

段落代码

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

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

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

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

首先,您需要向网站添加一个简单的CSS代码。 您可以使用WordPress定制器,也可以使用特定于站点的插件(如代码片段)。 对于此演示,我们将转到外观>自定义>其他CSS,然后将我们的代码粘贴到此处。

代码 {
字体大小:1.2em;
颜色:#1e1e1e;
职位:相对
border-radius:4px;
背景:#e1e1e1
}

在WordPress中显示代码-发布CSS更改

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

开始博客内容

切换到文本编辑器,然后将内容包装在标记内。 在我们的示例之后,我们的代码将如下所示:

创建博客

添加代码css

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

开始一个博客突出显示

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

结论

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

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

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

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

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

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

原创文章,作者:WPJIAN,如若转载,请注明出处:https://wpjian.com/tips/2021051545169.html