wpjam「代码高亮」插件特别之处

现在大部分代码高亮的插件都是使用 prism 这个代码高亮 js 库来实现的,wpjam「代码高亮」插件也是,只是之前是纯代码方式写到主题里面,今天就把它整理了一下,做成一个插件。

整个插件自己写的代码只有不到 30 行,就是利用 wordpress 的 wp_enqueue_scripts 接口让页面加载 prism 的样式和脚本代码。

然后插件也兼容 wpjam「静态文件」插件,不单独加载 prism 的样式和脚本代码,把 prism 的样式和脚本代码合并到整个站点唯一的样式和脚本文件中:

所以这个从另外一个侧面说明 wpjam 出品的插件,不是装的越多越慢,反而相互之间会配合的,最优化去处理问题

使用 wpjam「代码高亮」插件

怎么使用 wpjam「代码高亮」插件呢?非常简单,首先根据你使用不同编辑器略用不同。

如果你使用古腾堡编辑器的话,先点击选择创建一个代码块:

然后输入代码,选择该该区块:

点击右侧区块属性框,在额外的css类中输入:language-php,如果你的代码是 js 则,输入 language-javascript,css 则输入 language-css,html:language-markup,其他语言尝试一下:language-语言的英文名

如果是经典编辑器,则切换到代码模式,然后把代码放到:<pre class="language-php"><code></code></pre> 之间即可,如下图所示:

pre 标签的 class 定义就是语言,如何设置,和上面古腾堡的设置方式是一样的,自己灵活处理一下,个人感觉还是古腾堡编辑器方便一点。