highlight.js-谷腾堡编辑器代码高亮显示

前言

WordPress启用谷腾堡编辑器以后，区块编辑代替了原来的格式设置。其中增加了代码区块，默认的代码区块在网页中显示时是没有高亮显示的，我们可以使用Javascript插件highlight.js实现代码高亮显示；

需求

• 使用谷腾堡编辑器代码区块；
• 网页中实现代码高亮显示；

方法

第一步、下载css和js文件，可以选择喜欢的样式， 放在主题目录下，在functions.php中引用js和css文件;

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>

第二步 在主题footer.php文件中</body>标签前添加如下代码：

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

第三步 在古腾堡编辑器中选择代码区块，添加需要高亮显示的代码即可，效果参见本文代码；

highlight.js 特点

• 支持185中语言和89种样式，并支持自定义网站高亮语言；
• 自动语言识别；
• 多语言代码高亮；
• 支持node.js；
• 适用于任何标记语言；
• 兼容所有js框架；

下载地址

官网：https://highlightjs.org/