当前位置:Nanlon > 建站相关 > 正文

Typecho添加highlight.js代码高亮(兼容pjax)

Tips:本文最后更新于2020-01-14 12:35:49,某些文章具有时效性,若有错误或已失效,请在下方留言或联系Nanlon

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代码进行压缩,已知存在兼容问题。

感觉很棒!可以赞赏支持我哟~

赞(0) 打赏
作者保留所有权,侵删请联系,转载请注明: » Nanlon » Typecho添加highlight.js代码高亮(兼容pjax)

评论抢沙发