워드프레스 코드블록 예쁘게 꾸미기 - PrismJS로 코드 하이라이트 적용하기

PrismJS로 코드 하이라이트 적용한 결과 화면 캡쳐 — (突出显示代码的结果）

嗨！你有没有在 WordPress 博客上发布过代码，却发现看起来太平淡无奇？我知道我一开始就是这样。

不过不用担心，今天我们将向您展示如何使用 如何在 WordPress 中添加 "代码高亮 "功能给你

特别是 PrismJS(PrismJS) 这一强大的开源工具，我们将深入探讨如何自始至终实现漂亮的代码 Hightlight，而无需任何插件！

1. 什么是 PrismJS？

Prismjays是一款基于现代网络标准的轻量级代码高亮工具。成千上万的网站都在使用它，它能让你的代码看起来更易读、更专业。Prismajes 提供多种主题和插件，您可以根据自己博客的风格进行定制。

2. 上传 PrismJS 文件

要使用 Prismajes，您首先需要下载必要的文件，并将它们上传到您当前的 WordPress 主题文件夹中。

코드 하이라이트 적용 대상 언어 선택 화면 — (选择一种语言进行代码高亮显示）

2-1. 下载文件

PrismJS 官方网站并单击 "下载 "按钮。
压缩级别为 最小化版本(最小化版本）。
主题是 奥凯迪亚(特写）。
选择所需的语言。默认情况下 标记, CSS, C 类, JavaScript和 PHP中选择了 Python 和 R。我还选择了 Python 和 R。
从插件中选择 "复制到剪贴板按钮"，添加复制代码的功能。
点击下载 JS 和下载 CSS 按钮下载文件。

Copy to Clipboard Button 선택 화면 — (复制到剪贴板按钮选择屏幕）。

2-2 向 WordPress 上传文件

已下载 prism.js和 prism.css 文件，该文件位于您当前应用的 WordPress 主题目录内。 assets/js 和 assets/css 文件夹。最终路径应如下所示 您的主题是指当前应用的主题文件夹（如 Kadence、Twenty Twenty-Five 等）。

/wp-content/themes/your-theme/assets/js/prism.js
/wp-content/themes/your-theme/assets/css/prism.css

3. `functions.php` 和 `prism.js` 文件设置

在 WordPress 中应用 PrismJS functions.php 文件，这是本帖最重要的部分之一，请注意、复习和跟读。

3-1. `functions.php` 添加代码

在 WordPress 管理界面，转到外观 > 主题文件编辑器。
子主题的 functions.php 文件。之所以要在这里使用子主题，是为了在父主题更新时保留你的自定义设置。如果没有使用子主题，则需要进行设置。
将以下代码添加到 functions.php 将其添加到源代码底部并更新。

function enqueue_prism_scripts() {
    // 棱镜 CSS
    wp_enqueue_style(
        prism-css'、
        get_stylesheet_directory_uri() . '/assets/css/prism.css'、
        array()、
        '1.29.0'
    );

    // 棱镜 JS
    wp_enqueue_script(
        prism-js'、
        get_stylesheet_directory_uri() . '/assets/js/prism.js'、
        array()、
        '1.29.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'enqueue_prism_scripts')；

这段代码将在所有页面上加载 PrismJS 和 CSS 文件，您也可以添加条件语句，只在特定页面上加载它们。

3-2. `prism.js` 添加代码

要使用下载 Prism.js 时选择的插件（如工具栏、复制到剪贴板），请添加以下内容这些文件位于 /wp-content/themes/your-theme/assets/js/prism.js 就是这样。如上图所示，使用主题编辑器即可轻松应用。

// 激活工具栏插件
document.addEventListener('DOMContentLoaded', function () {
    Prism.plugins.toolbar.registerButton('copy-to-clipboard', function (env) {
        var button = document.createElement('button')；
        button.innerHTML = '复制'；
        button.addEventListener('click', function () {
            navigator.clipboard.writeText(env.code)；
        });
        返回 button；
    });
});

添加此代码后，您就可以通过代码块中的 "复制 "按钮一次性复制源代码。

4. 在古腾堡编辑器中使用

要在 Gutenberg 编辑器中应用 PrismJS，请按照以下步骤操作。如果你想知道这个编辑器是什么，它就是你常用的帖子编辑器。

添加或选择代码块。如你所知，键入"/code "即可。
将鼠标光标悬停在代码块上，单击面板中的设置 - 块，然后单击高级‘ 转到部分
附加 CSS 类 字段到 语言-[语言名称］在 JavaScript 代码中。例如，在 JavaScript 代码中→ 语言-JavaScript 例如

5 警告和提示

始终使用子主题。即使父主题更新了，您的设置也会被保留。
只选择您需要的语言，优化文件大小。文件越小，页面加载速度越快。
添加复制代码的功能将为访客提供更多便利。
选择与您的主题颜色相匹配的 PrismJS 主题。这将提高可读性。

6.故障排除和常见问题

Q:代码高亮不起作用。
答：确保在 functions.php 文件中正确输入代码，并确保 prism.js 和 prism.css 文件位于正确位置。

问：某些语言的高亮显示不起作用。
答：请确保您在下载 PrismJS 时选择了适当的语言。如果需要，请尝试重新下载。

Q:我的网页加载速度变慢了。
答：删除不必要的语言和插件，将文件最小化，然后再试一次。

总结

现在，你也可以像专业人士一样漂亮地显示代码了！如果有任何问题，请在评论中留言。让我们一起来解决吧！ 😊

如果您认为这太难或令人眼花缭乱，您可以直接将复制代码按钮应用到在 WordPress 中轻松创建一个复制代码按钮：WPCode 即可！请查看帖子了解详情！

# 术语表

wp_enqueue_scripts：如何在 WordPress 中正确加载脚本和样式
代码要点关键词：用颜色和样式突出显示编程代码，使其看起来更美观
PrismJS：基于 JavaScript 的代码语法高亮显示库
古腾堡：WordPress 的默认块编辑器
儿童主题可在保留父主题功能的同时进行修改的子主题。
语法高亮编程语言的彩色编码语法
functions.php可扩展 WordPress 主题功能的 PHP 文件。

美化 WordPress 代码块--使用 PrismJS 高亮显示代码

1. 什么是 PrismJS？