用Crayon Syntax Highlighter实现Word

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

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

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

设置链接

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

属性设置

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

插件图标

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

编辑代码

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

显示效果示意图

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

<pre class="lang:python theme:twilight" title="demo">
print("hello world")
</pre>