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/

如果您觉得有用就请点赞和分享
版权声明: 本文由 智慧宫 整理发表,转载请注明出处

发表评论

2 comments on “highlight.js-谷腾堡编辑器代码高亮显示”