很多技术博客都会在文章里插入一些代码,然后将完整的学习折腾过程记录下来,发到博客上供大家互相学习。但是WordPress本身的代码显示没有自带的高亮效果,这让用户阅读起来非常费劲。因此,装置一款适宜的代码高亮插件就显得非常有必要。

从易用性和功能两方面来看,Crayon Syntax Highlighter插件应该是首选。而在新版本5.7的WordPress中,Crayon Syntax Highlighter同样可以在区块编辑器中使用,尽管它已经五年没更新了。而且并不再和自带的代码显示分开,而是集成在了WordPress自带的代码区块里(当然,如果你使用经典编辑样式的话另说)。

设置方法:wp后台->设置->Crayon

Crayon Syntax Highlighter是一款强大且功能全面的代码高亮插件,强大的地方主要是它拥有多种高亮主题和多种显示字体来展示代码让使用者有足够多的搭配选择,另一方面就是其加载速度快,可以解析代码中的html,并且着色效果更好。使用 PHP 和 Jquery 构建,安装好之后它会在 WordPress 编辑器中添加一个代码按钮,你可以自定义地添加代码,同时你还可以选择语言、字体、代码格式等多种选项,而且你可以选择自己喜欢的主题,比如 Monokai、Eclipse 等,内置了几十种风格。提供了一个工具条,让访客自助能够控制代码的显示,比如:

✔集成主题编辑器

✔切换行号

✔超长宽度展示

✔代码全部选中功能

✔行号隐藏

✔复制 / 粘贴代码

✔在新窗口中打开代码

✔支持 bbPress

✔自动获取博客文章 / 评论中的<pre>…</pre> 进行高亮

✔远程请求缓存

✔可以在一个代码框内混合语言高亮显示

✔支持迷你标签,如 [php] [/php]

✔可以在行内调用代码高亮

✔支持<pre> 标记

✔手机 / 触摸屏设备检测

✔鼠标事件交互(例如在工具栏上双击可以全选代码)

✔Retina!

✔文件扩展名检测

✔设置实时预览

✔支持修改尺寸,边距,对齐方式,字体大小,行高