海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts

几乎每个技术博主、内容创建者或开发人员有时都需要在他们的博客上显示突出显示的代码片段。 这本身就令人头疼。 但是,突出显示该片段中的一行或多行也是必要的,不幸的是,该功能不是大多数代码嵌入的一部分。 幸运的是,存在 SyntaxHighlighter Evolved 插件。 我们将向您展示如何使用它来保持代码尽可能干净和可读。

https://www.youtube.com/watch?v=gBHk6QwlYsQ

订阅我们的 YouTube 频道

SyntaxHighlighter 进化

突出显示的代码片段

安装和激活插件很简单。 您可以在 WP.org 插件存储库中找到它,但请确保通过以下方式完成 亚历克斯·米尔斯 (Viper007Bond). 有很多具有相似名称和功能的插件,但我们知道这个插件是可靠的并且是最新的。 另外,这个带有一个专门用于古腾堡编辑器的块。 更不用说让您自定义体验的许多参数,这些参数使其成为此类任务的选择。

突出显示的代码片段

在下面 设置 在您的 WordPress 仪表板中的菜单中,您会发现一个标记为的新项目 语法高亮器. 继续并单击它。 在那里,您可以调整将代码片段嵌入 WordPress 网站所需的每一件小事。

语法高亮设置

插件的设置页面相对简单。 我们喜欢这个插件的一个特殊元素是,您可以获得大量关于代码如何在您的网站上显示的自定义。 您可以向嵌入中添加 CSS 类、调整行号填充、选择颜色主题、使用智能选项卡和自动换行,以及决定如何在站点范围内加载单个编码语言突出显示。

海外社媒SNS代运营Tiktok代运营公司

突出显示的代码片段

我们确实想列出我们认为大多数人应该知道的三个特定设置。

插件版本、行号和标签大小

首先是您加载的插件版本。 虽然插件本身在 repo 上不断更新,但取决于您希望如何最好地显示代码, 您可以在插件的 2.x 和 3.x 版本之间进行选择. 两者都是安全的,但是,它们每个都提供另一个没有的特定功能(至少在撰写本文时)。

如果用户复制您的代码是最重要的,那么 3.x 版就可以了。 但是,如果您的更多是用于显示而不是实际实用程序,那么 2.x 版的自动换行可能更适合您,因为它避免了在大段代码上使用滚动条的需要。

然后您可以选择是否显示行号。 对于大量的代码和教程,行号是无价的。 但是,当您有简短的代码片段时,就没有必要将它们连续标记为第 1 行和第 2 行。删除这些代码段可以使代码的外观更加整洁。

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

您的代码和简码

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

突出显示的代码片段

虽然有些人不是短代码的最大粉丝,因为它们可以将您与某些插件联系起来,但我们认为这些非常值得使用,因为它们很聪明而且很容易记住。 如果不出意外,您需要记住两件事,然后插件将为您发挥最佳性能。

  • 或者
     or  or  or...well, you get it</li>
            <li>[highlight 5-9]</li>
    </ul>
    
    Or some variation thereof. If you can remember those, you're pretty solid for most things you will use the plugin for.
    
    While you can use the long-form language identifiers, the SyntaxHighlighter is built well enough to make things easy on you. Here on the ET blog, whenever you see a code snippet, we have a similar shortcode processor where we just use <strong>code written here

    ,它已格式化并突出显示。

    使用简码

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

    突出显示的代码片段

    如果您是 Gutenberg/Block Editor 用户,事情也同样简单。 您可以再次为此使用文本块。 比这更简单的是自定义 HTML 块。 就像上面一样,将代码粘贴到短代码标签中。

    突出显示的代码片段

    然而,比这更好的是 SyntaxHighlighter Evolved 块本身。 插件安装中包含它自己的 Gutenberg Block,因此如果您不是短代码人并且不想摆弄参数,则不必。 只需找到下面的块 格式化 并将其插入您的帖子或页面。

    突出显示的代码片段

    无论您如何插入代码,您都会在 WordPress 网站的前端看到相同的渲染。

    突出显示的代码片段

    整理起来

    您可能需要向观众展示代码片段的原因有很多。 也许您编写了教程,或者您发布了常见问题的修复程序,供公众根据需要获取和使用。 但有时 GitHub 嵌入并不能为您的用户提供您想要的确切体验。 那时你需要像 SyntaxHighlighter Evolved 这样的插件。 只需点击几下,稍加定制,加上古腾堡块或短代码,您的观众就会毫无问题地浏览您的代码。

    您可以在您的网站上找到什么用途来突出显示这样的代码?

    Adil Bouyghajden/shutterstock.com 提供的文章特色图片

海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts