WordPress免插件设置代码高亮
第一步去 https://highlightjs.org官网下载highlightjs文件,你还可以在他们网站选择你需要的语言,不使用的可以不勾选,下载文件后放在网站根目录,或者其他你喜欢的地方。
第二步在你的主题中引用对应CSS样式和JS文件,例如下面直接在head文件中引用:
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
引入js和css文件,注意修改为你自己的highlightjs文件路径,css是你的代码高亮风格,不喜欢默认风格的可以修改,可以在https://highlightjs.org/static/demo/ 预览风格找到你喜欢的样式,例如我当前使用的是monokai风格,所以我引用的css就是monokai.css。
此外你还可以直接引用 highlightjs 官方托管的js与css文件。
cdnjs:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
jsdelivr:
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.3.1/build/styles/default.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.3.1/build/highlight.min.js"></script>
第三步在你的主题footer中加一句下面的js:
<script>hljs.initHighlightingOnLoad();</script>
之后添加代码时,使用古腾堡编辑器自带的代码区块就好了,highlightjs会自动判断代码语言,我当前wordpress采用的代码高亮方案就是这个。
- QQ群:253510359
- 建议:VPS商家层出不穷,根据需要购买,切莫剁剁剁!
- 评测:很多VPS虽已评测,但网络环境改变稳定性,速度也会随之改变.评测只能作为一般性参考.不负任何法律,道义责任.
- 申明:所有vps,域名,服务器优惠信息均来自网络公开内容,由于水平有限不免有谬误.请以官方为准.