在 WordPress 中使用 Prism.js 实现代码高亮

Prism.js 是一个轻量级、可扩展的代码语法高亮显示工具。通过将 Prism.js 集成到您的 WordPress 主题中，可以轻松地为博客文章中的代码片段添加漂亮的语法高亮。

我们的目标是利用 WordPress 古腾堡编辑器内置的“代码”区块，并结合 Prism.js 这个轻量级的代码高亮库，通过 CDN 方式加载，从而实现快速且无需插件的代码高亮效果。

步骤 1：编辑主题的 functions.php 文件

1. 编辑到您当前使用的主题目录，通常位于 wp-content/themes/your-theme-name/
2. 找到 functions.php 文件并使用文本编辑器打开它。

步骤 2：添加 Prism.js 代码

将以下代码片段复制并粘贴到 functions.php 文件中

// Code highlighting
function enqueue_prism_cdn() {
    $prism_version = '1.29.0';
    $cdn = 'https://cdnjs.cloudflare.com/ajax/libs/prism/' . $prism_version;
    $theme_css = $cdn . '/themes/prism-okaidia.min.css';
    $line_numbers_css = $cdn . '/plugins/line-numbers/prism-line-numbers.min.css';
    $prism_js = $cdn . '/prism.min.js';
    $line_numbers_js = $cdn . '/plugins/line-numbers/prism-line-numbers.min.js';
    $bash_js = $cdn . '/components/prism-bash.min.js';
    $custom_css = 'pre.line-numbers, pre { background: #2d2d2d; padding: 1em; overflow: auto; border-radius: 4px; color: #f8f8f2; } pre.line-numbers { position: relative; padding-left: 3.8em; } code { background: none !important; padding: 0 !important; }';
    $custom_js = 'document.addEventListener("DOMContentLoaded", () => { document.querySelectorAll("pre:not(.line-numbers)").forEach(pre => { pre.classList.add("line-numbers"); const code = pre.querySelector("code:not([class*=\'language-\'])"); if (code) code.classList.add("language-bash"); }); if (typeof Prism !== "undefined") Prism.highlightAll(); });';
    wp_enqueue_style('prism-css', $theme_css);
    wp_enqueue_style('prism-line-numbers-css', $line_numbers_css);
    wp_enqueue_script('prism-js', $prism_js, [], $prism_version, true);
    wp_enqueue_script('prism-line-numbers-js', $line_numbers_js, ['prism-js'], $prism_version, true);
    wp_enqueue_script('prism-bash', $bash_js, ['prism-js'], $prism_version, true);
    wp_add_inline_style('prism-css', $custom_css);
    wp_add_inline_script('prism-js', $custom_js);
}
add_action('wp_enqueue_scripts', 'enqueue_prism_cdn');

步骤 3：保存 functions.php 文件

• 保存对 functions.php 文件的更改。

如何使用

1. 在WordPress古腾堡编辑器中，添加“代码”区块。
2. 在代码区块中，输入您的代码。
3. 保存文章或页面，查看效果。