修改代码块样式

gomkiri 发布于 2025-11-01 46 次阅读


AI 摘要

主题自带代码框功能受限?插件渲染冲突更糟?教你如何彻底禁用主题代码高亮,让Code Block Pro插件完美接管。通过子主题添加简单代码,轻松实现语言选择、行号显示等高级功能。

在博客文章编写的过程中,我遇到了一个新的问题:主题自带的代码框格式扩展性很差(比如:选择代码语言很麻烦、不能显示行数、不能折叠代码等等),于是我在 WordPress 插件市场安装了一个新的代码框渲染插件:Code Block Pro ,在发现发生了严重的渲染冲突,得到的效果更差了,最后我决定直接禁用主题中的代码块渲染。

实现方法:为了避免受到主题更新的影响,我们依然通过子主题的方式来完成修改,不知道怎么使用子主题的可以看看修改文章页的特色图片显示这篇文章。我们在子主题的functions.php追加下面的内容:

// // 强制关闭父主题内置代码高亮(让插件接管)
// 仅覆盖代码高亮方式为 custom,其它配置保持不变
add_filter('option_iro_options', function ($opts) {
    if (is_array($opts)) {
        $opts['code_highlight_method'] = 'custom';
        // 可选:同时清理 Prism 相关选项,避免前端误判
        $opts['code_highlight_prism_line_number_all'] = false;
        $opts['code_highlight_prism_autoload_path'] = '';
        $opts['code_highlight_prism_theme_light'] = '';
        $opts['code_highlight_prism_theme_dark'] = '';
    }
    return $opts;
});
PHP

然后安装插件Code Block Pro,之后我们就能在编辑文章的时候使用 /code pro 来创建代码块,并在右侧的区块编辑中完成设置语言类型,开启行号,设置最大显示行高等自定义设置了。