WordPress divi主题

如何在 Divi 中共享和样式代码片段(3 种方法)

by | May 13, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

知道如何使用 Divi 在您的帖子或页面上共享和样式代码片段可能是一项非常方便的技能。 您可能需要一种方法来显示文档、教程或资源页面等内容的代码片段。 基本思想是在网页上显示代码,而不用 WordPress 将文本解释为实际代码。 听起来很容易。 但是,如果您不知道自己在做什么,您可能会发现结果非常不可预测。 值得庆幸的是,WordPress 有一个手动执行此操作的内置方法,可以轻松地将其合并到 Divi 构建器中,以向这些代码片段框添加自定义样式。 此外,还有一些插件和第三方资源可以真正简化在 Divi 中创建美观且功能强大的代码片段的过程。

google广告开户

在本教程中,我将向您展示可用于在 Divi 中共享代码片段的三种方法(手动、使用插件和使用 Gist)。 我还将向您展示如何使用 Divi Builder 设计一些代码片段框,这将有助于将这些片段提升到一个新的水平。

让我们开始吧。

抢先看

这是本教程中可能的代码片段设计的先睹为快。

带有代码片段的代码片段框添加了手动方式

迪维代码片段

使用插件添加的代码片段

迪维代码片段

使用 Gist 添加的代码片段

迪维代码片段

入门

对于本教程,您真正需要的是安装并激活 Divi 主题。 我们将在新页面上使用 Divi Builder 从头开始​​构建示例代码片段。

首先,创建一个新页面并在前端部署 Divi Builder。 然后选择“从头开始构建”选项。

现在你准备好了!

WordPress divi主题

在 Divi 中为代码片段设计自定义框

由于我们的实际代码片段将存在于文本模块中,因此我们可以使用 divi 构建器在文本模块中(和周围)添加设计元素。 对于这个设计,我们将使用一个简介模块作为代码片段的标签。 然后我们将设置样式并将其放置在文本模块的左侧。 然后我们将为我们的代码片段设置文本模块的样式。

创建节、行和列

首先,我们需要创建一个具有单列行的新部分。

迪维代码片段

然后按如下方式更新行设置:

天沟宽度:1
自定义填充:0px 顶部,0px 底部

迪维代码片段

创建文本模块

接下来,将文本模块添加到该行。

迪维代码片段

您现在可以将默认内容保留在那里。 稍后我们将在那里添加我们的 WordPress 代码片段。 现在,让我们通过更新以下文本设置来设置文本模块的样式:

背景颜色:#eff0f1
文字文字颜色:#000000
自定义边距:左 60px
自定义填充:顶部 3%、底部 3%、左侧 3%、右侧 3%

fiverr建站WordPress程序员

迪维代码片段

顶部边框宽度:10px
顶部边框颜色:#7cda24

迪维代码片段

创建代码片段标签

要创建代码片段标签,我们将使用一个简介模块。 这将允许您在显示的代码语言旁边添加一个简介图标(或自定义图像图标)。

创建一个简介模块并将其拖到文本模块上方。 然后更新以下简介设置:

独立站选品工具

标题: css
内容: [delete mock content]
使用图标:是
图标:见截图

迪维代码片段

然后更新设计设置如下:

背景颜色:#1b2426
图标颜色:##7cda24
图像/图标放置:左
图标字体大小:20px
标题文字颜色:#ffffff
标题文字大小:16px

迪维代码片段

高质量外链购买

标题行高:1.3em
宽度:100 像素
自定义边距:底部 -44px,左侧 -50px
自定义填充:顶部 10 像素,底部 2 像素,左侧 15 像素,右侧 15 像素

迪维代码片段

复制该部分以创建更多代码片段框设计

这负责我们的第一个代码框设计。 我们现在需要做的就是复制包含代码片段框设计的部分并更新标签和颜色以创建一个新的代码片段框用于不同的编码语言。 当然,这完全是可选的,但如果您计划在页面上添加不同的代码片段,则为每个片段设置不同的配色方案会很有帮助。

例如,复制该部分,然后打开简介模块设置。

将 Javascript 的标题更新为“js”。

JasperAI 10000字免费额度试用

然后右键单击图像/图标颜色并选择查找和替换。

迪维代码片段

更新以下查找和替换选项:

范围内:本节
用。。。来代替: [new color]
全部替换:检查替换所有找到的值

现在你有了一个新的 JS 代码片段框。

WordPress备份工具updrafplus

以下是 WordPress 流行代码类型的代码片段框示例。

迪维代码片段

方法 1:在 Divi 中手动创建代码片段(无插件)

如果您想在 Divi 页面上显示代码片段或手动发布(没有插件),请注意。 有限制。 如果您要定期向您的网站展示不同类型的代码,我不建议您使用手动方式。 但是,如果您有兴趣,这里是如何做到的。

第 1 步:使用 HTML 实体编码器对您的代码进行编码。

HTML 编码器采用这些特殊字符(例如“Code Beautify 似乎可以解决问题,我喜欢编码器保留换行符的方式,而手动操作很痛苦。

对于此示例,我将对以下 HTML 进行编码:

<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

将上面的 HTML 复制到剪贴板。 然后导航到 Code Beautify HTML Encoder。

将 HTML 粘贴到标有“输入要进行 HTML 编码的文本”的框中。 然后单击编码按钮。 然后将下面框中生成的编码字符串复制到剪贴板。

迪维代码片段

第 2 步:将编码的代码字符串粘贴到由“pre”和“code”标签包围的 Divi 文本模块。

然后在Divi中打开文本模块,将代码粘贴到内容框内,并用pre标签和code标签包裹代码如下:

<pre>
<code>
<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
</code>
</pre>

现在您已成功显示您的 HTML 代码。 有关“pre”和“code”标签的更多信息,请查看在您的帖子中编写代码的法典。

这是在桌面和移动视图上带有代码示例的最终设计。

迪维代码片段

迪维代码片段

使用溢出滚动

如果要添加大量代码,则需要使用溢出滚动来确保代码在页面上显示时不会超出文本模块容器。 这是因为 pre 和 code 标记将使您的内容对浏览器宽度没有响应。

您需要将水平溢出设置设置为滚动。 为此,请打开包含代码片段的文本模块并更新以下内容:

水平溢出:滚动

迪维代码片段

现在用户可以使用水平滚动条查看其余代码。

迪维代码片段

你甚至可以给你的文本模块一个最大高度来启动垂直滚动溢出来节省页面上的额外空间。

迪维代码片段

现在用户可以使用两个滚动条来查看内容。

使用文本模块设置调整文本样式

您可以使用内置的文本模块设置来自定义代码片段文本的样式。 但是,如果没有一些外部 CSS,您将无法更改默认字体。

迪维代码片段

使用 Code Prettify 插件将语法高亮添加到手动代码片段

好的,所以我知道我说过手动方式将没有插件,但我认为这将是一个有用的提示。 Code Prettify 插件将立即为所有“pre”标签添加代码突出显示。 这个插件的美妙之处在于绝对不需要定制。 您需要做的就是上传并激活插件。

以下是代码美化激活后代码的外观示例。

迪维代码片段

Code Prettify 来自 Google,也被用于在 stackoverflow.com 上为所有精彩片段设置样式。

方法 2:使用插件在 Divi 中创建代码片段

使用插件在 Divi 中显示代码片段可能会节省您的时间,特别是如果您计划定期添加代码片段。 由于许多插件都包含语法高亮和其他内置样式选项,因此您可以更好地控制代码段显示。

对于此示例,我将向您展示如何将代码片段添加到您已经使用 SyntaxHighlighter Evolved 插件设计的代码片段框中。 但请随意探索更多插件选项。

将插件添加到您的站点

第一步是将插件上传并激活到您的站点。 在您的 WordPress 仪表板中,单击以添加新插件并搜索该插件。 然后安装并激活插件。

迪维代码片段

配置插件设置

要配置插件设置,请导航到 Settings > SyntaxHighlighter。 然后更新以下内容:

荧光笔版本:版本 3.x
颜色主题:RDark

迪维代码片段

使用相应的短代码标签将代码片段添加到文本模块

该插件支持不同的代码语言显示。 您需要做的就是将代码包装在正确的短代码标签中。 您可以在插件设置页面下找到简码参数列表以及简码示例。

迪维代码片段

例如,如果你想显示一个 CSS 片段,你的代码应该在 css 短代码括号内。 它应该看起来像这样:

迪维代码片段

将具有正确短代码的代码片段添加到文本模块后,更新文本模块的设计设置,如下所示:

背景颜色:#1b2426(这与插件颜色主题使用的颜色相匹配)
填充:底部 3%

迪维代码片段

这是迄今为止的结果。

迪维代码片段

要摆脱右侧的白色边框线,您需要将以下自定义 CSS 添加到主题定制器中:

.syntaxhighlighter .container:before {
  width: 0px !important;
}

迪维代码片段

这是最终的设计。

迪维代码片段

注意:您可能想要探索可用的不同短代码参数。 它们将允许您突出显示某些代码行。

方法 3:使用 GitHub Gist 在 Divi 中创建代码片段

在 Web 上共享代码片段的一种非常流行(且简单)的方法是使用第三方网站,例如 gist.github.com。 Gist 是 Github 提供的一个工具,可以方便开发者归档和分享简单的代码片段。 您可以使用创建新 gist 时生成的脚本轻松地将这些片段嵌入 Divi。

注册帐户后,您将可以访问 gist。 要创建新的 gist,请访问他们的网站并单击以添加新的 gist。 然后给你的 Gist 一个标题并将代码片段粘贴到内容框中。 然后单击以创建一个秘密要点。

迪维代码片段

然后复制新 gist 顶部的嵌入脚本。

迪维代码片段

接下来,进入 Divi 中的文本模块,将脚本粘贴到内容框中。

迪维代码片段

然后取出自定义填充。

这是最终结果。 请注意,您甚至在 Gist 嵌入的底部有一个方便的“查看原始”链接来查看原始代码。

迪维代码片段

Divi Builder 之外的代码片段呢?

由于本教程更侧重于使用 Divi Builder 添加代码片段,因此我没有介绍如何使用 WordPress Block 或使用经典的 WordPress 编辑器添加代码片段。 但是,一些相同的原则仍然适用。 例如,“pre”和“code”标签仍将在经典编辑器中显示代码片段。 甚至在古腾堡也有一个代码块。 此外,本文中的插件也有一个专门用于此的 WordPress 块。 并且使用 Gist 脚本的方法也将按预期工作。

最后的想法

在 Divi 中显示代码片段并不难。 使用 WordPress 提供的 pre 和 code 标签手动添加代码片段将完成大多数非 html 代码片段的工作,但您应该首先通过 html 编码器运行代码片段以确保安全。 另外,您可以使用文本模块设置进一步自定义代码片段文本样式。 并且不要忘记 Code Prettify 为您的手动代码片段添加突出显示。

对于那些定期共享代码片段的人来说,使用 SyntaxHighlighter 插件或 Gist 可能是你最好的选择。 无论如何,您始终可以选择使用 Divi Builder 为您的代码片段添加更多创意设计。

有关更多信息,请查看我们关于您可以使用的一些有用的代码片段插件的帖子。

我期待在评论中收到您的来信。

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题