几乎所有博主、创作者 内容 或者技术开发人员有时需要在他们的博客上显示突出显示的代码片段。 这本身就是一个令人头痛的问题。 然而,突出显示此代码片段中的一行或多行可能也是必要的,不幸的是,此功能并不是大多数代码集成的一部分。 幸运的是,SyntaxHighlighter Evolved 插件存在。 我们将向您展示如何使用它来尽可能保持代码简洁和可读。

语法突出显示的演变

语法荧光笔

插件的安装和激活很简单。 您可以在WP.org插件存储库中找到它 但请确保由 亚历克斯·米尔斯(Viper007Bond),因为确实有很多结果。 但是,我们确实知道它是可靠的并且是最新的。 此外,该库还附带有古腾堡(Gutenberg)编辑器的专用模块。 更不用说许多参数,可以让您个性化您的体验,这使我们成为此类任务的选择。

语法荧光笔wordpress插件

在菜单中 参数 在您的WordPress仪表板中,您会发现一个名为 SyntaxHighlighter的 。 继续并单击它。 在那里,您可以调整将代码片段嵌入WordPress网站所需的每件事。

语法突出显示设置

该插件的设置页面相对简单。 我们喜欢这个插件的一个特别之处在于,您可以获得大量关于代码在您网站上的显示方式的自定义设置。 您可以将 CSS 类添加到嵌入中,调整行号填充,选择 主题 颜色,使用智能制表符和换行符,并决定单个站点范围内的编码语言如何突出显示负载。

语法高亮配置

我们想要定义大多数人应该知道的三个特定参数。

插件版本,行号和制表符大小

第一个是您要加载的插件版本。 尽管该插件在存储库中保持最新状态, 您可以在2.x和3.x版本的插件之间进行选择 ,具体取决于您要如何显示代码。 两者都是安全的,但是,它们各自提供了其他特性(在撰写本文时)却不提供。

如果用户复制您的代码是最重要的,则3.x版即可。 但是,如果您的显示比实际实用程序更有用,则版本2.x中的换行符可能对您更好,因为它不需要使用滚动条。适用于大型代码段。

然后,您需要显示或不显示行号。 对于大量的代码和教程,行号是无价的。 但是,如果您的代码段很短,则不必将其永久标记为第1行和第2行。删除它们可以显着改善代码的外观。

然后是 标签大小 仍然有争议。 默认选项是4,但是您可以将其更改为所需的任何数字。 包括正确的2值。(是的,我们意识到没有正确的值。我们只喜欢2个空格用于制表符。)

您的代码和简码

如果滚动到页面底部 参数 ,您将看到大代码的预览以及大量的短代码参数。 您将花费大量时间来浏览它们,只是为了查看插件可以做什么来展示您的代码片段。 另外,您在上述设置中对代码显示所做的任何更改都将反映在此处。 因此,请确保在更改任何选项后都点击保存。

参见divi语法

尽管有些人不是可以将您链接到某些插件的人,而不是短代码的最大拥护者,但我们认为它们值得使用,因为它们很聪明且易于记忆。 如果没有别的,您需要记住两件事,然后该插件将为您发挥最佳作用。

ou ou ou et...bien, vous obtenez</li><li>[highlight 5-9]</li></ul>

或一些变化。 如果您还记得的话,您会对使用此插件可以执行的不同操作充满信心。 虽然您可以使用长标识符,但是SyntaxHighlighter插件的构建足以简化您的工作。

使用短码

在任何可以呈现简码的地方,您都可以使用它们。 在 Divi 或经典编辑器,您可以使用文本模块或 TinyMCE 编辑器,只需在短代码之间粘贴代码。 由于 Visual 选项卡的工作方式,我们建议使用该选项卡 文本 保留这些格式的特殊字符。

Divi文字参数

如果您是Gutenberg /块编辑器用户,那么事情就这么简单。 您可以再次为此使用文本块。 自定义HTML块更加容易。 如上所述,将代码粘贴到shortcode标签中。

禁止html gutenberg divi

更好的是,SyntaxHighlighter Evolved块本身就是。 插件安装包括其自己的Gutenberg块; 因此,如果您不是简码,并且不想弄乱设置,则不必这样做。 只要找到下面的方块 格式化 并将其插入您的消息或页面中。

语法highliter gutenberg

无论您如何插入代码,您都将在WordPress网站的前端看到相同的呈现。

总结一下

出于多种原因,您可能需要向观众展示摘录。 也许您编写了教程或发布了针对常见问题的解决方案,观众可以随意取用? 但是有时GitHub集成只是不能为用户提供您想要的那种体验。 这是当您需要像SyntaxHighlighter Evolved这样的插件时。 

只需单击几下,即可进行一些自定义并使用Gutenberg块或简码,您的听众将毫无问题地浏览您的代码。