在 BBPress 中实现漂亮的代码高亮显示（支持原生 自动包裹）

这是一个针对 BBPress 论坛系统的代码高亮优化教程，使用了 Prism.js 来实现轻量美观的代码高亮，同时自动处理 WordPress 过滤机制造成的代码标签缺失问题。以下是完整讲解与作用说明：

📘 教程名称：

在 BBPress 中实现漂亮的代码高亮显示（支持原生 <code> 自动包裹）

🧠 背景与问题

WordPress 默认出于安全原因，会通过 kses 函数过滤 HTML 标签，其中包括 <pre> 和 <code>。这会导致：

• 用户在论坛帖中粘贴代码后无法正确显示格式和缩进。

• 即使你使用了 <code> 标签，也会被过滤掉，或样式失效。

• Prism.js 需要标准结构 <pre><code class=”language-xxx”>代码内容</code></pre> 才能高亮。

✅ 解决方案思路

通过三步实现完整支持：

1. 允许安全输出 <pre> 与 <code> 标签

2. 只在 BBPress 页面加载 Prism.js（避免全站冗余）

3. 将所有裸 <code> 自动转换为 <pre><code> 格式，并转义内容

🔧 教程步骤与代码详解

1. ✅ 允许 <pre>与<code>标签输出

add_filter('bbp_kses_allowed_tags', function ($allowed_tags) {
    $allowed_tags['pre'] = ['class' => true];
    $allowed_tags['code'] = ['class' => true];
    return $allowed_tags;
});

📌 作用：

• 解锁 BBPress 中对 <pre> 和 <code> 标签的过滤限制。

• 允许 class=”language-php” 等属性通过，用于代码高亮。

2. ✅ 加载 Prism.js 与 CSS（仅限 BBPress 页面）

// 2. 加载 Prism.js 的样式和脚本，仅限 BBPress 页面
add_action('wp_enqueue_scripts', function () {
    if (function_exists('is_bbpress') && is_bbpress()) {
        // 使用 CDN 加载 prism 样式和核心脚本
        wp_enqueue_style('prism-css', 'https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.min.css');
        wp_enqueue_script('prism-core', 'https://cdn.jsdelivr.net/npm/prismjs@1/prism.min.js', [], null, true);
    }
});

如果你想本地主题内调用js和css则将js 和css下载下来放到主题的lib目录用以下代码调用

add_action('wp_enqueue_scripts', function () {
    if (function_exists('is_bbpress') && is_bbpress()) {
        wp_enqueue_style(
            'prism-css',
            get_stylesheet_directory_uri() . '/lib/prism.min.css',
            [],
            null
        );
        wp_enqueue_script(
            'prism-core',
            get_stylesheet_directory_uri() . '/lib/prism.min.js',
            [],
            null,
            true
        );
    }
});

📌 作用：

• 仅在论坛页面中引入代码高亮所需的 Prism.js。

• 避免在非论坛页面加载，提高前端性能。

• 路径指向主题目录下的本地文件，更安全、加载更快。

3. ✅ 自动将

<code>

包裹为标准结构并处理缩进

function bbpress_auto_wrap_code_blocks($content) {
    return preg_replace_callback(
        '#(?<!<pre>)<code\b[^>]*>(.*?)</code>(?!</pre>)#is',
        function ($matches) {
            $raw = html_entity_decode($matches[1], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
            return '<pre><code class="language-markup">' . esc_html($raw) . '</code></pre>';
        },
        $content
    );
}

add_filter('bbp_get_reply_content', 'bbpress_auto_wrap_code_blocks', 20);
add_filter('bbp_get_topic_content', 'bbpress_auto_wrap_code_blocks', 20);

📌 作用：

• 自动检测论坛帖中所有裸 <code> 标签。

• 自动转换为标准结构 <pre><code class=”language-markup”>…</code></pre>。

• 使用 esc_html() 保留格式、缩进和换行。

• 避免已经是 <pre><code> 的重复包裹，保持兼容性。

🎯 最终效果

• 支持原生 <code> 标签输入，无需手动调整格式。

• 自动输出为标准 Prism 高亮结构。

• 所有 BBPress 帖子中的代码都美观、高亮、格式正确。

• 全流程轻量，适合对性能有要求的论坛环境。

🧩 进阶建议（可选）

• 可加载 Prism 的 Autoloader 插件，支持自动识别 language-xxx。

• 如果你常用多语言（PHP、JS、Shell、Nginx），可以设置默认语言为 language-markup 或 language-php。

• 使用 <code class=”language-php”>…</code> 可自动高亮为 PHP。