本文最后更新于2019年03月20日,共147字。如有问题或建议,欢迎在文章底部留言参与讨论!

highlight.js是一个轻量级的代码高亮库。

官网地址:https://highlightjs.org/

特点:

  • 支持185种语言和89种风格;
  • 自动语言检测;
  • 多语言代码高亮显示;
  • 可用于node.js;
  • 适用于任何标记;
  • 与任何js框架兼容。

以下是具体的操作步骤

1、在主题文件header.php</head>标签前添加如下代码:

//引入highlight的css资源
<link href="https://cdn.bootcss.com/highlight.js/9.15.6/styles/github.min.css" rel="stylesheet">

2、在主题文件footer.php</body>标签前添加如下代码:

//引入highlight的js文件
<script type="text/javascript" src="https://cdn.bootcss.com/highlight.js/9.15.6/highlight.min.js"></script>
//将代码高亮添加到页面加载事件
<script>hljs.initHighlightingOnLoad();</script>
//pjax开启后的pjax回调
<script type="text/javascript">
$(document).on('pjax:complete', function() {
    document.querySelectorAll('pre code').forEach((block) => {
    hljs.highlightBlock(block);
    });
});
</script>

注:请勿对html代码进行压缩,已知存在兼容问题。