wordpress使用markdown时采用prismjs进行代码高亮
背景:最近将博客的文章编辑器切换为markdown了,但是发现wordpress主题自带的css无法实现代码高亮,作为强迫症看着非常不舒服,遂想尽方法实现在markdown中实现代码高亮。最终解决方法如下:
1.使用markdown编辑器
首先,你需要将wordpress自带的文章编辑器切换为markdown,这里需要安装markdown插件,几经对比,选择了WP Editor.md插件,一款可以实时预览的markdown编辑器,具体有哪些优点可以详细阅读插件说明。
插件截图: 最主要的是该插件代码高亮就是使用的prism,所以在编辑阶段的代码会自动使用prism的语法,不需要额外设置。不信你可以查看你文章的html源码,会有下面的语法:
1 |
|
代码高亮选项的开关在插件的设置,“语法高亮选项-支持Prism语法高亮”中开启。
2.去prism官网下载自己专属的css和js文件
下载地址:http://prismjs.com/download.html 选择你常用的语言和配置,点击DOWNLOAD JS和DOWNLOAD CSS下载css和js文件,也就是prism.js和prism.css文件。
3.修改wordpress主题
进入主题对应的文件夹,创建prism文件夹,将prism.js和prism.css文件放入该文件夹,以后如果想增加语言或者修改其他配置时,直接覆盖修改这两个文件即可。 修改funcations.php文件,其中的自定义路径就是prism.js和prism.css文件的存放路径。
1 |
|
4.Enjoy
好了,这时候你再刷新你的文章,你就会发现已经实现代码高亮了,就是这么简单!
wordpress使用markdown时采用prismjs进行代码高亮
https://www.shangyexin.com/2018/04/20/use-prism/