WordPress + bbPress教程：允许 pre/code标签支持代码高亮显示

📘 WordPress + bbPress 教程：允许

<pre><code>

标签以支持代码高亮显示

在 bbPress 中默认使用了 WordPress 的 wp_kses() 函数对用户提交的内容进行严格的 HTML 标签过滤。为了安全起见，许多标签都会被移除，包括常用于展示代码的 <code> 和 <pre> 标签。

本教程将通过一个代码片段，扩展 bbPress 的允许标签，使其支持 <pre> 和 <code> 标签，并允许附加 class 属性（如 class=”language-php”），从而让你在论坛中实现漂亮的代码高亮效果，例如使用 Prism.js 或 highlight.js。

✅ 功能目标

• ✅ 在 bbPress 中支持原生 HTML 的 <code> 与 <pre> 代码块展示；

• ✅ 保留并允许 class=”language-*” 以支持代码高亮库；

• ✅ 保持原有安全策略，仅开放需要的标签和属性；

• ✅ 兼容 <pre><code class=”language-php”>…</code></pre> 嵌套结构；

• ✅ 无需安装额外插件即可生效；

🧩 实现代码

将以下代码放入你的主题或子主题的 functions.php 文件中：

if ( ! function_exists( 'ntwb_bbpress_custom_kses_allowed_tags' ) ) {
    /**
     * 自定义 bbPress 允许的 HTML 标签
     *
     * 允许 <pre> 和 <code> 标签，并支持 class 属性
     * 可用于配合 Prism.js、highlight.js 等前端高亮库
     *
     * @param array $tags 当前允许的标签列表
     * @return array 扩展后的标签数组
     */
    function ntwb_bbpress_custom_kses_allowed_tags( $tags ) {
        $custom_tags = array(
            // Links
            'a' => array(
                'class'  => true,
                'href'   => true,
                'title'  => true,
                'rel'    => true,
                'target' => true,
            ),
            // Quotes
            'blockquote' => array(
                'cite' => true,
            ),
            // Containers
            'div'  => array( 'class' => true ),
            'span' => array( 'class' => true ),
            // Code blocks
            'code' => array( 'class' => true ), // 支持 class="language-*"
            'pre'  => array( 'class' => true ),
            // Formatting
            'em'     => true,
            'strong' => true,
            'del'    => array( 'datetime' => true ),
            // Lists
            'ul' => true,
            'ol' => array( 'start' => true ),
            'li' => true,
            // Images
            'img' => array(
                'class'  => true,
                'src'    => true,
                'border' => true,
                'alt'    => true,
                'height' => true,
                'width'  => true,
            ),
            // Tables
            'table'  => array( 'align' => true, 'bgcolor' => true, 'border' => true ),
            'thead'  => array( 'align' => true, 'valign' => true ),
            'tbody'  => array( 'align' => true, 'valign' => true ),
            'tfoot'  => array( 'align' => true, 'valign' => true ),
            'tr'     => array( 'align' => true, 'valign' => true ),
            'th'     => array( 'align' => true, 'valign' => true ),
            'td'     => array( 'align' => true, 'valign' => true ),
        );

        return array_merge( $tags, $custom_tags );
    }
}
// 注册钩子到 bbPress 的标签过滤器中
add_filter( 'bbp_kses_allowed_tags', 'ntwb_bbpress_custom_kses_allowed_tags', 99 );

🧪 使用方式（示例）

在发布话题或回复时，可以直接粘贴如下格式的 HTML 代码：

<pre><code class="language-php">
<?php
echo "Hello World";
?>
</code></pre>

这段内容将会被 完整保留，并可以配合前端加载的 Prism.js、Highlight.js 等库进行代码高亮显示。

🎨 配合前端高亮库（例如 Prism.js）

你可以在你的主题中加载 Prism：

add_action('wp_enqueue_scripts', function () {
    if (function_exists('is_bbpress') && is_bbpress()) {
        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
        );
    }
});

🔐 安全说明

• 本修改 不会完全关闭 HTML 过滤，仅开放了特定标签和属性；

• <script>、<style> 等危险标签依然会被屏蔽，保持论坛的基础安全性；

• 适用于开发者社区、技术类站点等需要频繁贴代码的场景；