如何在WordPress注释中添加语法突出显示

2020-07-16
WordPress

您是否要在WordPress注释中添加语法突出显示？默认情况下，WordPress的注释，帖子或页面没有语法高亮显示。

如果您的网站上有关于编码或编程的文章，那么有时您的用户可能希望在注释中留下代码示例。

在本文中，我们将向您展示如何轻松地在WordPress注释中添加语法突出显示。

为什么以及何时需要在WordPress注释中突出显示语法

出于安全原因，WordPress不允许您仅在文章中粘贴代码段。

通过使用块编辑器在您的帖子或页面中添加代码块，可以显示一些代码示例。

之后，您可以在代码块的文本区域内添加代码段。

现在，您可以将更改保存到您的帖子或页面上，并进行预览以查看实际的代码。

根据您的WordPress主题，它通常会以非常简单的文本形式显示，并且不会突出显示任何语法。

这看起来不太好，并且对您的用户不是很有帮助。

语法高亮是一种通常用于显示代码的样式格式。它添加了行号和颜色以突出显示代码模式，从而使其易于理解。

这是带有一些语法高亮显示的代码片段的示例。请注意用于突出显示代码中不同元素的行号和颜色：

<html> <head> <title>My Awesome Website</title> </head> <body> <h1>Welcome to My Homepage</h1> </body></html>

现在，如果您运行有关编码或编程的WordPress博客，则需要突出显示语法以正确显示文章中的代码。

您可能还希望您的用户能够在注释中使用相同的语法突出显示，这将使注释更加有趣并吸引用户。

话虽如此，让我们看一下如何在WordPress注释，帖子和页面中添加语法突出显示。

在WordPress中添加语法突出显示

在WordPress中添加语法突出显示的最简单方法是使用Syntax Highlighter Evolved。它非常易于使用，并允许您在WordPress帖子，页面和评论中启用语法突出显示。

首先，您需要安装并激活Syntax Highlighter Evolved插件。有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

激活后，您需要编辑要在其中添加代码的帖子或页面。在帖子编辑屏幕上，单击（+）图标添加一个新块，然后将“ SyntaxHighlighter Code”块插入您的内容区域。

现在，您将在帖子编辑器中看到一个新的代码块，您可以在其中输入代码。添加代码后，您需要从右列中选择块设置。

在这里，您可以选择代码的编程语言，显示或隐藏行号，使链接可单击等。

完成后，继续并保存您的帖子或页面。现在，您可以访问您的网站，以突出显示语法的代码。

那很容易，不是吗？

但是，WordPress注释不支持块编辑器。让我们看看您的用户如何将Syntax Highlighter Evolved与他们的注释一起使用。

在WordPress注释中添加语法突出显示

默认情况下，WordPress注释启用语法标注突出显示。但是，为了在注释中使用它，需要将代码包装在shortcode周围。

该插件带有一些以所有流行的编程和脚本语言命名的短代码。

只需使用语言名称将代码包装在方括号中即可。例如，如果您要添加PHP代码，则将如下添加：

[php] <?php private function get_time_tags() { $time = get_the_time('d M, Y'); return $time; } ?> [/php]

同样，如果您想添加HTML代码，则可以将其包装在HTML短代码周围，如下所示：

[html] <a href="https://example.com">Demo website</a>

[/html]

在注释表单中添加语法突出显示通知

虽然使用短代码使用语法高亮显示很容易，但是问题是您的用户不知道他们可以做到这一点。

幸运的是，有一种快速的方法可以让他们知道他们可以在短代码中使用语法高亮显示。

为此，您需要向WordPress网站添加自定义代码段。如果您以前没有做过，请查看我们的指南，了解如何在WordPress中添加自定义代码。

您将需要在代码片段插件，functions.php文件或特定于站点的插件中添加以下代码。

functionwpbeginner_comment_text_before($arg) {
$arg['comment_notes_before'] .= "<p class='comment-notice'>You can use shortcodes for syntax highlighting when adding code. For example, [php][/php] or [html][/html]</p>";
return$arg;
}
add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');