WordPress免插件设置代码高亮

本站优惠券栏目展示的都是具有优惠券的淘宝热销商品,如果商品正合您意不妨先领个优惠券在去下单,您每一次领取优惠券在下单老马都会给我一点点小费,就权当对小弟的支持可好?如果栏目里没有中意的商品也别急,我还专门为您提供了一个京东淘宝优惠券网站,点击右边这个链接可以直接进入👉https://quan.yumus.cn,下单前可以在这个网站搜索一下看有没有您需要的商品,所有的交易都是在淘宝或京东完成您无需担心售后服务和交易安全,小弟在此恳请大家多多支持。

前些天安装了一款代码高亮的wordpress插件,插件不错,支持古腾堡编辑器,但打开网站首页突然发现好像比之前要慢了一点,于是我查看了一番源代码发现这插件给网站新增了一共10个css和js文件,而且是每个页面都添加了,这叫我怎么受得了,虽然我使用了对象存储和cdn加速但那也不是这么玩的啊,我发布的代码只会出现在文章内容页啊亲,越想越忍受不了必须得想个法子,果然经过一顿百度找到方法了,不用插件也可以,这里分享给大家。

第一步去 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/[email protected]/build/styles/default.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>

第三步在你的主题footer中加一句下面的js

<script>hljs.initHighlightingOnLoad();</script>

之后添加代码时,使用古腾堡编辑器自带的代码区块就好了,highlightjs会自动判断代码语言,我当前wordpress采用的代码高亮方案就是这个。