如何给WordPress文章页面添加代码高亮显示功能

如何给WordPress文章页面添加代码高亮显示功能

　　您是否想知道如何将语法突出显示添加到使用 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'); // {}

　　在本文中，我将教您在没有插件的情况下如何给WordPress文章页面添加代码高亮显示功能语法高亮功能。

　　可以安装一个插件，让您的 WordPress网站语法高亮显示，但我尽量避免添加插件，以便我的网站加载速度更快。最重要的是，Prism非常轻量，因此不会减慢您的网站速度。核心代码在最小化和压缩后只有2KB ，非常小。Prism 是一个轻量级、可扩展的语法高亮器，构建时考虑到了现代网络标准，此外，如果您需要更多证据证明Prism是 WordPress 最佳的语法高亮器，我应该指出，许多知名网站都使用它，包括 CSS Tricks、Stripe、Mozilla 甚至 React 的主网站。

　　推荐：WordPress的移动优先索引怎么做

如何将Prism.js语法高亮添加到WordPress网站

1、选择棱镜选项

　　首先，转到 Prism 下载页面。您将看到类似以下的页面：

　　在这里，您将看到一大堆选项，您可以选择这些选项来自定义您的代码在 Prism 中的外观。

　　对于第一部分“压缩级别”，请选择“最小化版本”。这将缩短后台代码中使用的文本量，从而使其在您的网站上运行得更快。

　　接下来，您将选择要使用的主题。我选择了Okaidia主题，但您可以随意选择您认为最适合您网站的主题。当您点击各种主题时，您会注意到“下载 JS ”和“下载 CSS ”按钮上方的代码块将会发生变化，让您了解代码在您选择的主题下的外观。

　　接下来，选择在您的网站的代码块中使用的语言。

　　对我来说，我保留了默认选项，即Markup、CSS、C-like和JavaScript。我还选择了PHP ，因为 WordPress 代码片段几乎总是用 PHP 编写的。这涵盖了我计划在博客文章中展示的绝大多数语言。但是，如果您确定要使用 Python、TypeScript 或 SQL，只需选中其中任何一个框即可。但请记住，选中的语言越多，JavaScript 和 CSS 文件就会越大。

　　因此，请确保只选择您需要的语言。如果您发现您需要的语言最初没有获得，您可以随时返回并添加另一种语言的背景代码。

　　至于插件，您可以自己阅读有关插件的信息，请查看此处的插件部分。如果需要，这些插件会提供一些额外的功能，例如在您的代码块中显示行号或向代码添加“复制”按钮，以便其他人可以轻松复制它。我个人选择了“Copy to Clipboard Button”插件，您可以通过将鼠标悬停在此页面上的任何美化代码片段上来查看。

　　推荐：如何在PHP中删除字符串中的最后一个字符

2、下载 Prism JS 和 CSS 文件

　　一旦您选择了所需的压缩级别、语言和插件，您就可以下载要放置在网站上的文件了。

　　单击步骤 1末尾所示的大“下载 JS ”和“下载 CSS ”按钮，并将每个文件保存到您的机器上的某个位置。这将在您的下载文件夹中创建一个prism.js和prism.css文件。现在是时候获取这些 synxtax 突出显示 JS 和 CSS 文件并将它们上传到您的 WordPress 子主题。

3、将 Prism文件上传到子主题

　　下载prism.js和prism.css文件后，您就可以将这些文件上传到网站后端。

　　登录到托管服务提供商的后端（无论是 SiteGround还是您使用的任何托管公司）。对于大多数托管服务提供商，您将访问cPanel。

　　如果您的托管服务提供商使用cPanel以外的其他服务，那么只需转到您可以访问域文件的区域。

　　进入主题文件夹。如果您使用 子主题 （您应该这样做），则进入该主题的目录。或者，如果您只是使用父主题，则转到那里。可以前往 找到您的主题文件夹wp-content/themes/your-theme-name。我使用的是Kadence 主题，因此我的子主题的文件夹位于wp-content/themes/kadence-child。进入相应的主题文件夹（例如子主题文件夹）后，您应该会看到其中已经有一些文件，例如style.css和functions.php。这是您将上传下载的prism.css和prism.js文件的文件夹。

　　点击“上传”按钮，如上图所示。上传页面应打开。浏览到您存储在计算机上的prism.css文件并选择该文件。

　　完成后，如果您返回到目录显示的位置，您应该看到prism.css和prism.js文件都位于您的子主题文件夹中，如下所示：

　　推荐：Cachify缓存插件教程简单免费的WordPress缓存插件

4、添加 PHP 函数来加载 Prism

　　您的 Prism 文件现已上传到您网站的后端。剩下要做的就是确保每当我们网站的页面出现在浏览器中时，它们都会加载到我们的网站中。这将需要我们在刚刚工作的后端进行更多工作。

　　好的，现在我已经说清楚了，请在子主题文件夹中找到functions.php文件。在我的例子中，它位于wp-content/themes/kadence-child 。　右键点击此文件并选择“编辑”。完成后，可能会出现一个框，提示您应该备份文件以防万一。如果您觉得会弄乱一切，请随意将文件内容备份到某处。

　　**注意：我将向您展示两种不同的方法，您可以将 Prism 文件包含在您的网站中。第一种方法，它将在您网站的每个页面上加载您的 Prism JS 和 CSS 文件。这实际上不会减慢任何速度，因为文件非常小。但是，第二种方法向您展示如何有条件地加载您的 Prism JS 和 CSS 文件，以便它们仅在某些页面上加载，并且性能更高。

　　为了实现这一点，我们将在functions.php文件中编写一个简单的 PHP 函数。第一个选项会在您网站的每个页面上加载您的 Prism 文件。第二个选项有条件地仅在某些页面上加载您的 Prism 文件，这样它们就不会在不需要时运行。我将在下面解释这两个选项。

　　在网站的每个页面上加载 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');

　　仅在带有“代码”标签的博客文章上有条件地加载 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');

　　使用is_single()意味着我希望 Prism 文件仅在博客文章上加载，这意味着我的主页和常规页面（例如“关于”和“联系”）不会加载文件 – 很好！第二部分&& has_tag( 'code' )意味着，如果这是一篇博客文章并且我的博客文章上有“代码”标签，我只想加载文件。这样，我就可以非常轻松地专门定位包含代码片段的博客文章。这也意味着 Prism 文件不会加载不需要它们的博客文章，例如没有代码片段的博客文章。

　　推荐：如何在Instagram上拓展您的电子商务业务

5. 在 WordPress Gutenberg 和经典编辑器中使用 Prism

　　在将更改保存到functions.php文件后，您就可以开始使用了！将向您展示如何在 WordPress Gutenberg 编辑器和 Classic 编辑器（如果您仍在使用的话）中使用 Prism JS。

WordPress Gutenberg 编辑器：

　　如果您使用的是新的 WordPress Gutenberg 编辑器，为了让 Prism JS 使用 Gutenberg 美化您的代码片段，只需通过单击+按钮添加代码块即可，否则您可以在编辑器中输入/code，然后就会显示一个代码块。

　　选择代码块，然后输入或粘贴要显示的代码。它最初看起来像这样：

<a href="https://startblogging101.com" target="_blank">Start Blogging 101</a>

　　将代码写入块中后，您现在要做的就是为代码块提供适当的CSS 类，以使 Prism 语法高亮显示生效。聚焦代码块后，转到右上角的“设置”按钮，然后在右侧面板最底部找到“高级”选项卡。展开“高级”选项卡，您将看到一个“附加 CSS 类”的文本区域。在这里，输入language-，然后输入代码所使用的语言。

　　例如，如果它是 HTML 代码，则需要输入language-markup；如果它是 JavaScript，则需要输入language-javascript；如果它是 PHP，则需要输入language-php等等。

　　此外，如果您碰巧inline code在 Gutenberg 段落中使用该选项，那么您所要做的就是将适当的CSS 类添加到段落块中。段落块处于焦点状态，转到“设置”，展开“高级”部分并向您的段落添加适当的语言CSS 类，它将适用于您的所有内联代码。

　　推荐：[最新版]FacetWP插件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>

　　推荐：如何使用Elementor编辑WordPress页眉和页脚

总结

　　以上是晓得博客为你介绍的如何给WordPress文章页面添加代码高亮显示功能的全部内容，就是这样！您可以使用 Prism 语法高亮显示 使用 WordPress Gutenberg 编辑器或 Classic 编辑器编写的所有代码块。这对于开发人员或任何将代码片段作为其帖子一部分的人来说都是完美的选择。

　　你觉得 Prism JS 怎么样？如果你能使用它或者遇到了麻烦，请在评论中告诉我！

　　推荐：如何不使用插件将视频添加到WooCommerce产品页面图库

　　推荐：Mac运行缓慢怎么优化