WordPress免插件设置代码高亮

建站教程 2020-02-27

前些天安装了一款代码高亮的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="[email protected]/build/styles/default.min.css">
<script src="[email protected]/build/highlight.min.js"></script>

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

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

之后添加代码时,使用古腾堡编辑器自带的代码区块就好了,highlightjs会自动判断代码语言,我当前wordpress采用的代码高亮方案就是这个,如果不想去官网下载的可以采用我下载的highlightjs文件。

文件名称:highlightjs代码高亮

获取密码请关注公众号【语幕】回复关键字“1202”获取

相关阅读

WordPress调用不同样式的分类列表

一个强大的WordPress主题应该满足各种自定义需求的设置,比如不同分类使用不同的分类列表样式,今天就和大家分享一下WordPress不同分类使用不同分类列表样式的设置思路。 方法一:创建独立ID或别名的样式文件 WordPress默认的分类是查找对应ID的主题文件,找不到就会指向archive.php文件,如果archive.php文件不存在,就会默认使用index.php文件。到网站后台查看…

建站教程 2021-07-07
WordPress调用不同样式的分类列表

wordpress附件上传重命名

说到附件上传重命名这个问题,可能很多人不太在乎,其实以前我也不太在乎这个事情,但是直到有一天我发现水煮鱼博客有这么一个解释(点击查看水煮鱼原文),他说道“ 新图片上传会到数据库里面检查图片的名字是否已经有了,有了就会重命名图片的名字,比如 1.jpg,就会被重命名为 1-2.jpg,如果 1-2.jpg 名字也有了,就会重命名为 1-3.jpg,以此类推,一直到名字唯一为止。这样会造成上百条 SQ…

建站教程 2020-03-13
wordpress附件上传重命名

WordPress免插件设置代码高亮

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

建站教程 2020-02-27
WordPress免插件设置代码高亮

WordPress固定链接 %postname% 和 pathinfo 的冲突

主要冲突表现在,在访问wordpress的正常页面、分类、文章时,都正常访问,正常显示,而当你访问一个不存在的url时,你的站点不会显示到404页面,而是显示的首页; 可能大家听起来会很模糊,没明白过来是啥意思; 例如:访问 https://www.huitheme.com/theme 可以访问,因为这个页面真实存在,所以没有问题;而当访问到 https://www.huitheme.com/ge…

建站教程 2021-05-28
WordPress固定链接 %postname% 和 pathinfo 的冲突

在Chrome中模拟微信内置浏览器

1、安卓 QQ 内置浏览器 UA 2、安卓微信内置浏览器 UA 3、IOSQQ 内置浏览器 UA 4、IOS 微信内置浏览器 UA 在 Chrome 添加 UA 打开 Chrome 调试工具(F12),点击右上角设置图标,如下图 选择左边栏 Devices,如下图 选择右边栏 Add custom device 填写要模拟的设备,添加,如下图

建站教程 2021-11-02
在Chrome中模拟微信内置浏览器
回到顶部