用Crayon Syntax Highlighter实现Wordpress语法高亮

作为一个计算机相关学科的老师,经常需要在页面中展示一些代码片断,这个时候,如果可以跟离线编辑器一样显示语法着色,无论是阅读方便程度还是美观(逼格?)程度都无疑会有提升。Wordpress下可以实现语法着色的插件有很多,我个人试用过多款,最终发现Crayon Syntax Highlighter非常不错。

1、插件的安装
Wordpress插件的安装就有点老生常谈,由于Crayon Syntax Highlighter是一个已经入驻官方目录的插件,所以在安装时不外乎两种方法,一种是在后台在线搜索并安装,另一种是先在官方站点下载ZIP,上传并安装。如果需要关于安装做更详细的了解,可以阅读这篇文章:Wordpress插件的安装与管理。

2、插件的配置
在安装并启用插件后,可以对Crayon Syntax Highlighter做一些基础的设定,设置的入口,可以在后台“已安装插件”的列表中找到链接。


用Crayon Syntax Highlighter实现Wordpress语法高亮_第1张图片
设置链接

在配置页面,可以设置插件在前台的显示主题(我比较喜欢Twilight,在Sublime Text中我也一样是使用这个主题的)、字体格式、默认的情况(这个插件支持Python、Java、PHP等主流和非主流的语言40多种,对于一般人的需求应该都是可以满足的)


用Crayon Syntax Highlighter实现Wordpress语法高亮_第2张图片
属性设置

3、插件的使用
在安装后插件后,以后进入文本编辑器编辑文件时,可以看到已经多了一个“<>”的图标,如图所示。


用Crayon Syntax Highlighter实现Wordpress语法高亮_第3张图片
插件图标

单击这个图标,即可以出现代码编辑浮窗,然后在其中的文本框中输入或粘贴你想要添加的代码,编辑完毕,单击“插入”即可。


用Crayon Syntax Highlighter实现Wordpress语法高亮_第4张图片
编辑代码

最终的显示效果如下图所示:


用Crayon Syntax Highlighter实现Wordpress语法高亮_第5张图片
显示效果示意图

这里说明一下,默认是以代码块的方式插入的,如果勾选上方的“行内”,则以嵌入行的方式显示,形如print("hello world!")。另外,也可以直接在编辑器里用`代码`的方式插入行内代码,通过在HTML编辑模式下使用

标签直接来插入代码块,以下是一个示例。

print("hello world")

你可能感兴趣的:(用Crayon Syntax Highlighter实现Wordpress语法高亮)