您是否想知道如何向使用 Gutenberg 编辑器或 Classic 编辑器构建的 WordPress 网站和博客文章添加语法突出显示？也许 Gutenberg 或 Classic 编辑器中的常规代码片段样式太无趣，而您想要分享看起来像来自实际代码编辑器 (IDE) 的片段？好吧，你很幸运，WordPress 的Prism.js语法高亮功能可以满足你的需要。
Prism是一个语法高亮器，它可以美化您在 WordPress 博客文章或页面上放置的所有代码片段。不确定我所说的语法高亮是什么意思，或者想知道语法高亮有什么用？以下是一个例子。
您的代码片段将看起来像 这样：
const getURLParameters = url =>
(url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
(a, v) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a),
{}
);
// Examples
getURLParameters('http://url.com/page?n=Adam&s=Smith'); // {n: 'Adam', s: 'Smith'}
getURLParameters('google.com'); // {}但是您想要下面的代码效果？
const getURLParameters = url =>
(url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
(a, v) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a),
{}
);
// Examples
getURLParameters('http://url.com/page?n=Adam&s=Smith'); // {n: 'Adam', s: 'Smith'}
getURLParameters('google.com'); // {}很整洁吧？
在本文中，我将教您如何在没有插件的情况下在您的 WordPress 网站中实现 Prism.js 语法高亮功能。
您可以安装一个插件，让您的 WordPress 网站语法高亮显示，但我尽量避免添加插件，以便我的网站加载速度更快。
最重要的是，Prism非常轻量，因此不会减慢您的网站速度。核心代码在最小化和压缩后只有2KB，非常小。
Prism 是一个轻量级、可扩展的语法高亮器，构建时考虑到了现代网络标准。
此外，如果您需要更多证据证明Prism是 WordPress 最佳的语法高亮器，我应该指出，许多知名网站都在使用它，包括 CSS Tricks、Stripe、Mozilla 甚至 React 的主网站。
按照以下 5 个步骤了解如何将 Prism.js 语法高亮添加到您的 WordPress 网站：
1. 下载
首先，转到 Prism 下载页面。您将看到类似以下的页面：
在这里，您将看到一大堆选项，您可以选择这些选项来自定义您的代码在 Prism 中的显示方式。
对于第一部分“压缩级别”，请选择“最小化版本”。这将缩短后台代码中使用的文本量，从而使其在您的网站上运行得更快。
接下来，您将选择要使用的主题。我选择了Okaidia主题，但您可以随意选择您认为最适合您网站的主题。
当您点击各种主题时，您会注意到“下载 JS ”和“下载 CSS ”按钮上方的代码块将会发生变化，让您了解代码在您选择的主题下的外观。
接下来，选择在您的网站的代码块中使用的语言。
对我来说，我保留了默认选项，即Markup、CSS、C-like和JavaScript。我还选择了PHP，因为 WordPress 代码片段几乎总是用 PHP 编写的。这涵盖了我计划在博客文章中展示的绝大多数语言。
但是，如果您确定要使用 Python、TypeScript 或 SQL，只需选中其中任何一个框即可。但请记住，选中的语言越多，JavaScript 和 CSS 文件就会越大。
因此，请确保您只选择了您需要的语言。如果您发现您需要一种您最初没有得到的语言，您可以随时返回并添加另一种语言的背景代码。
至于插件，您可以自己阅读有关插件的信息，请查看此处的“插件”部分。
如果需要，插件可以提供一些额外的功能，例如在代码块中显示行号或在代码中添加“复制”按钮，以便其他人可以轻松复制它。我个人选择了“复制到剪贴板按钮”插件，您可以通过将鼠标悬停在本页上任何经过美化的代码片段上来查看它。
如果您使用的是桌面，请将鼠标悬停在以下代码片段上时检查复制按钮：
let button = document.getElementById('clickMe');
button.addEventListener('click', function(e) {
e.preventDefault();
document.execCommand('copy', false, document.getElementById('select-this').select());
});现在您已经选择了所有 Prism JS 语法高亮器选项，是时候进入第 2 步了！
2.下载 Prism JS 和 CSS 文件
对于第二部分，您将下载 Prism JS（JavaScript）和CSS（层叠样式表）文件。
一旦您选择了所需的压缩级别、语言和插件，您就可以下载要放置在网站上的文件了。
单击步骤 1末尾所示的大“下载 JS ”和“下载 CSS ”按钮，并将每个文件保存到您的网站上的某个位置。
这将在您的下载文件夹中创建一个prism.js和prism.css文件。
现在是时候获取这些 synxtax 突出显示 JS 和 CSS 文件并将它们上传到您的 WordPress 子主题了，我将在步骤 3中介绍。
3. 将 Prism 文件上传到子主题
下载prism.js和prism.css文件后，您就可以将这些文件上传到网站后端。
在这一部分中，您 不会 使用 WordPress。现在，进入主题文件夹。如果您使用 子主题 （您应该这样做），则进入该主题的目录。或者，如果您只是使用父主题，则转到那里。
您可以前往 找到您的主题文件夹wp-content/themes/your-theme-name。由于我使用的是带有 Kadence 子主题的 Kadence 主题，因此我的子主题的文件夹位于wp-content/themes/kadence-child。进入相应的主题文件夹（例如子主题文件夹）后，您应该会看到其中已经有一些文件，例如style.css和functions.php。这是您将上传下载的prism.css和prism.js文件的文件夹。
现在是时候上传您的文件了。
点击“上传”按钮，如上图所示。上传页面应打开。浏览到您存储在计算机上的prism.css文件并选择该文件。如果上传页面有一个“权限”部分，只需保留默认值 6-4-4。现在，对您的prism.js文件执行完全相同的步骤。完成后，如果您返回到目录显示的位置，您应该看到prism.css和prism.js文件都位于您的子主题文件夹中，如下所示：
做得好！是时候进入第 4 步了。
4. 添加 PHP 函数来加载 Prism
您的 Prism 文件现已上传到您网站的后端。太棒了！我们剩下要做的就是确保每当我们网站的页面出现在浏览器中时，它们都会加载到我们的网站中。这将需要我们在刚刚工作的后端进行一些额外的工作。
还记得我们刚才所在的文件夹吗 wp-content/themes/your-theme-name？我们将再次在该文件夹中工作。但是，这就是为什么使用子主题非常重要 ，因为我们将使用 子主题的 functions.php文件。
您永远不应该修改父主题的functions.php文件，因为它可能会扰乱您的网站的工作方式，并且，在您的主题更新后，您可能会丢失在父主题的functions.php文件中所做的所有工作。
好的，现在我已经说清楚了，请在子主题文件夹中找到functions.php文件。在我的例子中，它位于wp-content/themes/kadence-child 。
右键点击此文件并选择“编辑”。完成后，可能会出现一个框，提示您应该备份文件以防万一。如果您觉得会弄乱一切，请随意将文件内容备份到某处。
但是，您可能还没有向子主题的functions.php文件添加任何内容，这意味着没有任何内容需要备份。无论如何，单击弹出框上的“编辑”。
您的浏览器中应该会出现一个相当丑陋的文本编辑器页面。如果您已经进入过此文件，则可能存在您已经编写的文本（或者主题的创建者在其中添加了一些注释）。否则，它将是空白的。
如果文件是空白的，它将看起来像这样：
<?php
/**
* Add custom functions here
*/在这里，您将编写代码，以便每当有人打开您网站上的页面时加载您的 Prism 文件。
我不会在这里详细介绍，但将自定义脚本和样式添加到您的网站的正确方法（如果您使用的是 WordPress）是先 注册 文件，然后 将其加入队列。您可以在此处阅读有关将 CSS 和 JavaScript 添加到 WordPress 网站的 一些精彩文档 。
**注意：我将向您展示两种不同的方法，您可以将 Prism 文件包含在您的网站中。第一种方法，它将在您网站的每个页面上加载您的 Prism JS 和 CSS 文件。这实际上不会减慢任何速度，因为文件非常小。但是，第二种方法向您展示如何有条件地加载您的 Prism JS 和 CSS 文件，以便它们仅在某些页面上加载，并且性能更高。
为了实现这一点，我们将在functions.php文件中编写一个简单的 PHP 函数。第一个选项会在您网站的每个页面上加载您的 Prism 文件。第二个选项有条件地仅在某些页面上加载您的 Prism 文件，这样它们就不会在不需要时运行。我将在下面解释这两个选项。
选项 1：在网站的每个页面上加载 Prism 文件
<?php
// Function to add prism.css and prism.js to the site
function add_prism() {
// Register prism.css file
wp_register_style(
'prismCSS', // handle name for the style
get_stylesheet_directory_uri() . '/prism.css' // location of the prism.css file
);
// Register prism.js file
wp_register_script(
'prismJS', // handle name for the script
get_stylesheet_directory_uri() . '/prism.js' // location of the prism.js file
);
// Enqueue the registered style and script files
wp_enqueue_style('prismCSS');
wp_enqueue_script('prismJS');
}
add_action('wp_enqueue_scripts', 'add_prism');选项 2：仅在带有“代码”标签的博客文章上有条件地加载 Prism 文件
<?php
/**
* Add custom functions here
*/
// Function to add prism.css and prism.js to the site
function add_prism() {
if ( is_single() && has_tag( 'code' ) ) {
// Register prism.css file
wp_register_style(
'prismCSS', // handle name for the style
get_stylesheet_directory_uri() . '/prism.css' // location of the prism.css file
);
// Register prism.js file
wp_register_script(
'prismJS', // handle name for the script
get_stylesheet_directory_uri() . '/prism.js' // location of the prism.js file
);
// Enqueue the registered style and script files
wp_enqueue_style('prismCSS');
wp_enqueue_script('prismJS');
}
}
add_action('wp_enqueue_scripts', 'add_prism');**注意：如果您知道一些 PHP 代码，则不需要包含结束的?>PHP 标签，因为这可能会导致页面出现错误，因此请准确复制上述文件。
对于 Start Blogging 101，我个人使用了选项 2。我之所以使用选项 2，是因为我只想在绝对必要时加载我的 Prism 文件。由于它们非常小，所以让它们在每个页面上加载并不一定是件坏事，但如果没有必要，为什么要在每个页面上加载它们呢？
在选项 2中，请注意从选项 1添加的额外行。添加的行显示如下：
if ( is_single() && has_tag( 'code' ) ) {
// function here
}使用is_single()意味着我希望 Prism 文件仅在博客文章上加载，这意味着我的主页和常规页面（例如“关于”和“联系”）不会加载文件 – 很好！
第二部分&& has_tag( 'code' )意味着，如果这是一篇博客文章并且我的博客文章上有“代码”标签，我只想加载文件。这样，我就可以非常轻松地专门定位包含代码片段的博客文章。这也意味着 Prism 文件不会加载不需要它们的博客文章，例如没有代码片段的博客文章。
如果我写了一篇博客文章，并希望 Prism 使我的代码片段看起来更漂亮，那么我现在所要做的就是添加“代码”标签并按照步骤 5中的说明操作，然后就大功告成了！Prism 文件仅在该页面上加载，我的代码片段被美化了，一切看起来都很漂亮。
5. 在 WordPress Gutenberg 和经典编辑器中使用 Prism
在将更改保存到functions.php文件后，您就可以开始使用了！最后一部分实际上是 在您的一篇 WordPress 博客文章中使用语法高亮器 。我将向您展示如何在 WordPress Gutenberg 编辑器中使用 Prism JS，如果您仍在使用 Classic 编辑器，还可以在 Classic 编辑器中使用 Prism JS。
WordPress Gutenberg 编辑器：
如果您使用的是新的 WordPress Gutenberg 编辑器，请按照以下方法操作。说到这一点，您应该使用新的 WordPress Gutenberg 编辑器，因为 Classic 编辑器将只支持到 2021 年底。
为了让 Prism JS 使用 Gutenberg 美化您的代码片段，只需通过单击+按钮添加代码块即可，否则您可以在编辑器中输入/code，然后就会显示一个代码块。
选择代码块，然后输入或粘贴要显示的代码。它最初看起来像这样：
<a href="https://*****.com" target="_blank">Hello Word！</a>将代码写入块中后，您现在要做的就是为代码块提供适当的CSS 类，以使 Prism 语法高亮显示生效。
聚焦代码块后，转到右上角的“设置”按钮，然后在右侧面板最底部找到“高级”选项卡。
展开“高级”选项卡，您将看到一个“附加 CSS 类”的文本区域。在这里，输入language-，然后输入代码所使用的语言。
例如，如果它是 HTML 代码，则需要输入language-markup；如果它是 JavaScript，则需要输入language-javascript；如果它是 PHP，则需要输入language-php；等等。
如果您不确定应该在语言部分后面放什么，请查看PrismJS 网站上支持的语言部分。
为你的代码块赋予适当的CSS 类后，就可以开始了！
请记住，代码块在 Gutenberg 编辑器中看起来仍然像同样无聊的代码样式，但是只要您预览博客文章，您就会看到代码块变成了 Prism 的优点！您的代码块现在看起来像这样：
<a href="https://****.com" target="_blank">Hello Word!</a>此外，如果您碰巧inline code在 Gutenberg 段落中使用该选项，那么您所要做的就是将适当的CSS 类添加到段落块中。
确保段落块处于焦点状态，转到“设置”，展开“高级”部分并向您的段落添加适当的语言CSS 类，它将适用于您的所有内联代码。<strong>look like this</strong>
就这些了！现在，您已成功使用 Gutenberg 编辑器将 Prism JS 语法突出显示功能实现到您的 WordPress 博客文章中。
WordPress 经典编辑器：
如果您仍在使用经典 WordPress 编辑器，请在您的博客文章中使用此方法使用 Prism JS。
当您使用 WordPress 在经典编辑器中撰写博客文章时，只需使用“文本”选项卡即可。撰写文章时，有两个选项卡可供您选择 – “视觉”选项卡和“文本”选项卡。“文本”选项卡允许作者添加自己的 HTML。
当您想使用刚刚实现的新 Prism 语法高亮功能编写代码块时，您将 像平常一样使用普通标签开始您的代码块。但现在，您需要做的就是为 标签分配一个类。<pre><code><code>
如果代码块要用 HTML 编写，则可以用 开头 。如果用 JavaScript 编写，则可以用 开头， 依此类推。<pre><code class="language-markup"><pre><code class="language-javascript">
明白了吗？这是一个例子。为了获得用 JavaScript 编写的示例代码块以采用 Prism 的语法高亮显示，这是您必须在博客文章的文本选项卡中编写的完整代码。
<pre><code class="language-javascript">
var myObject = {
property1: "something",
property2: 5,
property3: true
};
</code></pre>就是这样！现在，您可以使用 Prism 语法高亮显示 使用 WordPress Gutenberg 编辑器或 Classic 编辑器编写的所有代码块。这对于开发人员或任何将代码片段作为其帖子一部分的人来说都是完美的选择。
你觉得 Prism JS 怎么样？如果你能使用它或者遇到了麻烦，请在评论中告诉我！
