今天发现handsome主题的代码高亮显示出现了问题,看上去是因为lf3-cdn-tos.bytecdntp.com跑路了的样子,导致highlight.js不能用。本文介绍如何处理这个问题。

描述问题

控制台里的报错是这样的:

Uncaught SyntaxError: Unexpected end of input
core.min.js?v=8.3.02021122601:3 Uncaught ReferenceError: hljs is not defined
at HTMLElement. (core.min.js?v=8.3.02021122601:3:28257)
at Function.each (jquery.min.js:2:2861)
at n.fn.init.each (jquery.min.js:2:845)
at Object.highlightEnhance (core.min.js?v=8.3.02021122601:3:27709)
at core.min.js?v=8.3.02021122601:3:29630
at core.min.js?v=8.3.02021122601:5:13166
at i (jquery.min.js:2:27151)
at Object.add [as done] (jquery.min.js:2:27450)
at Object.addScript (core.min.js?v=8.3.02021122601:5:13150)
at Object.highlight (core.min.js?v=8.3.02021122601:3:29574)

报错信息

临床表现就是代码高亮没了,并且复制不了代码,看上去就是普通的文本,面如死灰:

代码没有任何高亮显示

分析问题

查看网站源代码,发现highlight.js在这里:

HIGHLIGHT_CDN: 'https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/highlight.js/10.6.0',

网页源码

然后我就尝试去直接打开这个链接还有其首页,直接啥也没有,看样子是跑路了:

链接打不开404

解决问题

我去highlight.js官网去看了看,给了好几个调用的链接,众所周知,jsd在国内已经挂掉了,这里写另外两个:

highlight官网给的链接

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<link rel="stylesheet"
      href="//unpkg.com/@highlightjs/cdn-assets@11.5.1/styles/default.min.css">
<script src="//unpkg.com/@highlightjs/cdn-assets@11.5.1/highlight.min.js"></script>

目前,11.5.1是最新的版本,为了保证是和主题一致,建议将其改为10.6.0版本即可。只需要改一下数字。

然后在handsome主题的后台自定义输出head 头部的HTML代码里添加即可,例如我写的是:

此处内容需要评论回复后(审核通过)方可阅读。

default.min.css是具体的样式表,这里的是默认,要是github样式就是github.min.css。具体的需要highlight.js里的哪个样式,可以去网上查查。

如果不确定的话,建议看下面修改源码的方式,直接包括了所有的样式。

修改源码(推荐)

通过上一步在头文件中加入这个js代码可以解决高亮失效的问题,作为一个强迫症,我想要去修改源码在哪呢?

我找了找,最终在:themes/handsome/libs/CDN.php里面把

此处内容需要评论回复后(审核通过)方可阅读。

全部修改为

此处内容需要评论回复后(审核通过)方可阅读。

修改后,就没有报错了,并且代码恢复高亮显示。

效果

后台也没有了highlight的报错

版权声明 ▶ 本网站名称:陶小桃Blog
▶ 本文链接:https://www.52txr.cn/2022/CodeHighlight.html
▶ 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行核实删除。
▶ 转载本站文章需要遵守:商业转载请联系站长,非商业转载请注明出处!!

最后修改:2022 年 06 月 27 日
如果觉得我的文章对你有用,请随意赞赏