WordPress中的代码高亮

按照我一贯的至简作风,在使用了这么久的Markdown编辑器插件之后,我觉得我是否可以改变我的这个习惯,干脆使用Wordpress的默认编辑器好了,我觉得改变这一个使用习惯应该不怎么难。
但是我发现一个让我很难受的问题,就是代码高亮。事实上我觉得WP默认的编辑器还是很简约的。

一般的格式都有:粗体、斜体、列表、引用、超链接。而我一般用到的也就是这五种格式了,所以下面的一些功能我还是用不着,但是这个无所谓了。
但是,为什么没有代码块格式呢?(其实经我发现,在下拉栏里面还是有个“预格式化”

但是这个预格式化很鸡肋,其一是无法选择代码语言,它将所有的代码都放到 pre 标签内,这样就无法使用代码高亮。其二是编写体验极差,因为选择了预格式化之后,输入的内容跟普通文本没有什么区别,仅仅是字体变小了一些,然后 tab 键无法正常使用,我根本无法在编辑器里编写代码,即使代码不多也写的很难受。
所以即使我怎么做,也无法在不使用插件的情况下实现代码高亮。(除了一种极端做法:在【文本】状态下,直接编写HTML,这意味着我每写一段代码都要打上 pre > code.language-xxx ,这样才可能在网页上使用JS的代码高亮插件。

必须使用插件

既然必须使用一个插件来实现,那自然是越简单越好,即它的功能就是在WP自带的编辑器里添加一个加入代码高亮的按钮就行了。
此类插件很多我就不说了。
但是我想要解决一个问题,就是我以前的文章都是用markdown写的,所以解析出来的代码块就是 code标签带有language-xxx的样式,所以我要找的插件最好是使用highlight.js或者prism的。
其实我更喜欢使用hljs的,但是无奈找不到合适的。
只有一个APH Prism Syntax Highlighter符合我的上述要求。
它在编辑器上的菜单中添加了一个按钮,可以插入代码,然后按照prism的格式去解析出代码语言并插入到code标签里。
但是这个插件对我以前的文章没有生效,因为它在没有使用到这个这个插件(没有使用插入代码的那个按钮)的文章里面是没有引用prism.js和css文件的,既然找到原因就很好办了。
那就在这个插件的基础上改改吧,最好让他同时支持不同的JS高亮库!

《WordPress中的代码高亮》有4个想法

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注