写于:20260121
好久没写关于 WordPress 插件的推荐文章了,因为我不是那种喜欢插件换来换区或者各种试用的用户,我都是只在有实际需要的时候才会装插件,而且基本上选好就不太会改变了。
这次来推荐的是个代码高亮的插件,推荐的原因是因为博主之前一直在用的插件 Enlighter 已经不再更新了,虽然现在也能很好的工作,但没有支持了难免心里会有点膈应,所以就想着换一个,于是便找到了这次推荐的 Code Block Pro。
PS:旧的 Enlighter 插件现在也依然好用,不记得我之前是否有推荐过了,不介意不再更新的也可以试试:https://wordpress.org/plugins/enlighter/
简单介绍&使用
介绍
虽然咱比较小白,不过有时候还是有贴下代码之类的需求的,而 WordPress 虽然原生自带代码块,但样式单一,用起来并不是很漂亮,所以还是需要一个代码高亮的方案。
在考虑怎么实现高亮的时候,我最在意的一点就是希望即便日后停用了,代码也还是能正常显示,所以许多主题自带的短代码方案我都没有考虑,而是选择了更佳稳妥的插件方案。
Code Block Pro 这个插件有几个我非常喜欢的点:
- 使用 VS Code 同款渲染引擎,更加现代化
- 代码高亮是通过在编辑文章时直接由后端渲染生成 HTML 代码来实现的,也就意味着不怎么需要去引入更多的 CSS JS,节约资源性能也更好,同时因为是标准的 HTML 代码,日后插件禁用或者删除了也能生效
- 支持非常多的主题,支持高亮的语言也多(官方说超过 140 种)
- 每次添加的代码块可以单独制定样式,支持选择字体(本地存储)
因为博主之前一直用的是 Enlighter,它是通过引入 CSS JS 这种传统方案来实现高亮的,我还是第一次发现 Code Block Pro 这样直接生成预渲染 HTML 的方案(以前也只试过手动的),而且渲染出的也是标准的<pre><code>这样子的代码,兼容性满分。
使用
Code Block Pro 安装好之后,区块选取列表里会多一个 Code Pro 区块,点击添加到文章之后,就可以看到类似这样的代码区块,以及右边的定制区块菜单:

可以自定义的功能还是挺多的,而且自定义的样式可以直接在编辑文章时就展示出来,不像有的插件要去WordPress 的前台打开网页才能看到效果,这可能就是预渲染的好处吧,非常好用。
因为不想太多占用篇幅,我就不一一介绍插件自带的那些主题和功能了,我在下面定制了几个代码块,可以看下输出的效果:
<?php
echo "Hello World";
?><?php
echo "Hello World";
?>PHP<?php
echo "Hello World";
?><?php
echo "Hello World";
?>能发现可以定制的东西挺多的,这些块的设置都是单独生效的,而且也会记住你上次选择的设置,方便日后使用不需要每次都重新定制。
另外,如果你打开这篇文章的源代码,定位到代码块这里也会发现它都是直接渲染成了 HTML 的,这也是我很欣赏的一点,不引入多余资源的同时也不用担心以后插件不能用了代码会不会失效。
插件信息
插件名称:Code Block Pro
插件作者:Kevin Batdorf
当前版本:1.27.7(于 20260121 时)
适用版本:WordPress 6.0 及以上版本
PHP 版本要求:PHP 7.0 及以上
语言:多语言含中文支持
WordPress 插件页面地址:https://wordpress.org/plugins/code-block-pro/
插件 GitHub 开源地址:https://github.com/KevinBatdorf/code-block-pro
Code Block Pro 的付费版地址:https://code-block-pro.com/themes?theme=andromeda&lang=bash#lifetime
吃水不忘挖井人,如果大家觉得这个插件不错也可以试试付费版,付费版是一次付费终生享有的,功能和免费版区别不大,但是会有更多主题可以选择,也能自定义主题,同时作者会提供独立开发(可能是说针对性开发?)服务。
PS:本文特色图片 UnSplash,创作者 Pankaj Patel,原出处:https://unsplash.com/photos/monitor-displaying-indexhtml-codes-_SgRNwAVNKw




