WordPress代码高亮非插件
Pre
自从换了主题,决定用markdown写文章之后,就再也不用原来的使用网站转换代码成高亮了然后插入文本了。但是新主题对代码效果不好。
终于在使用Remarkable这款linux下的markdown编辑器的时候,发现可以保存成有代码高亮格式的网页,通过导出成网页功能查看后发现是利用了highlight这个项目。
使用说明
下载
从 https://highlightjs.org/ 下载文件,当然可以自定义自己需要的语言,下载完成后解压目录结构如下:
.
├── CHANGES.md
├── highlight.pack.js
├── LICENSE
├── README.md
├── README.ru.md
└── styles/
我们只需要两部分highlight.pack.js
和styles/
文件夹中的一个样式,可以在官网查看到demo,这里我们选择androidstudio.css
样式。
上传
将highlight.pack.js
和androidstudio.css
文件上传到你wordpress的wp-content/uploads/
文件夹下
修改引用
在你wordpress主题的header.php
里</header>
之前,添加如下内容:
<link href="http://yourdomain.com/wp-content/uploads/androidstudio.css" rel="stylesheet"/>
<script src="http://yourdomain.com/wp-content/uploads/highlight.pack.js"> </script>
<script> hljs.initHighlightingOnLoad(); </script>
删除缓存
如果你用了wp-super cache之类的话,删除缓存,否则只需要刷新网页即可。
语言高亮
一般脚本会自动高亮,但是可以在写markdown格式博客的时候,就直接指定好语言,如果你是用markdown写,代码这种格式
“`
yourcode
“`
在第一个“`后面添加之前自定义的支持的语言即可。
可以在php里判断一下是不是文章内容页,再决定是否输出改行JS和CSS
Get!
好像没用诶。。
你没发现我的就显示高亮了么。。清空缓存插件的缓存。
没装缓存插件
叼叼叼