轻松实现WordPress代码高亮——Prism小巧、高效、可扩展的语法高亮插件
轻松实现WordPress代码高亮——Prism小巧、高效、可扩展的语法高亮插件

轻松实现WordPress代码高亮——Prism小巧、高效、可扩展的语法高亮插件

Prism-小巧又高效的WordPress代码高亮插件

以前我这里很少有代码出现,不过最近开始业余爱好了解Python,发个学记笔记出来发现没有个代码高亮还真是不太好看,我不是指是否美观(当然,能美观点更好呗),我是指这些代码清一色白纸黑字发出来,复习的时候有些眼晕。所以开始折腾代码高亮,经过WP后台直装几个插件尝试之后,最后选了Prism,因为他超轻量级,渲染高效,而且是不用在WP后台安装任何插件。

  • 这个东西真的是挺强大的,目前支持297中语言的代码高亮(我都不知道原来有这么多种语言的吗?)
  • 官方给出的配色方案有8种可供选择。
  • 如果都不满意,自己直接修改CSS文件,方便高效。
  • 不需要WP后台装插件,我就喜欢干净的后台。
  • 上传2个小文件,WP文件中添加2行代码,轻松搞定。

1. 到Prism官方去定制你的JS和CSS文件

官网:https://prismjs.com/

打开后,顶部有个巨大的DOWNLOAD图标,没心情仔细了解的话,直接点它就是了。

进入下载页之后,根据需要选择配色主题(themes)以及需要高亮支持的代码语言(Languages),选好之后,页面底部下载代码的地方会有配色预览,同时,还会告知,根据你当前的选择,需要下载的2个文件有多大。

底部这里还有一些扩展功能(Plugins)可选,例如给渲染后的代码块添加行号复制按钮、下载按钮等常用功能,以及其他各种功能,根据喜好勾选即可。

2. 下载文件

这个不用安装的插件的确是很小巧,总共只有2个文件:

  • prism.js 识别并完成代码高亮的主体文件
  • prism.css 代码高亮的配色css文件(对颜色不满意可以随时修改)

定制好语言和配色方案后,页面最下方就有预览和两个巨大的下载按钮。

分别下载到这两个文件,并上传到WP所在的对应目录就可以了,例如你的WP存放在主机的wordpress文件夹,那么你可以在这里新建一个或者选择一个现有的路径来存放这两个文件。

3. 修改WP源文件调用即可

找到你WP当前主题的header.php文件,将如下代码插入到<head></head>之间即可完成插件安装。

<link rel="stylesheet" href="http://www.cnwyw.net/wp/synhl/prism.css" />
<script type="text/javascript" src="http://www.cnwyw.net/wp/synhl/prism.js"></script>
<!--
    文件路径根据自己的网站修改一下,
    现在看到的代码高亮就是我在官方配色Tomorrow Night的基础上自己调整CSS文件所得
-->

4. WP发表文章时调用代码高亮

完成插件安装之后就简单了,在需要高亮的代码块中加上对应语言的css标识就行了。

现在的WordPress自带的区块式编辑器添加这个很方便,选中代码块,点开右侧工具栏的高级,在额外的CSS类中添加即可。例如:language-pyton,就会在页面输出后,将该代码块视为Python语言进行高亮渲染;输入lang-css就会当做CSS代码来进行渲染;其他语言以此类推。

在这里,language-python和lang-python是同理的,对于我这种讲求效率的(懒)人来说,自然是选择简短的。

没了,就这么简单。剩下的就是根据自己喜好调整prism.css的配色了。

哦,对了,有一点需要注意的是,因为是额外加载css文件,所以,有时候你修改了css并保存之后,未必会生效,那可能是被浏览器缓存挡住了,需要在浏览器里单独访问这个prism.css并且刷新一下它本身,然后再去刷新你的WP正文页就能看到调整之后的效果了。

发表回复

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