highlight.min.js高亮代码无效的解决办法
OrangeThinK 2022年08月26日 •  0
本文最后修改于 386 天前,部分内容可能已经过时!

在网页使用过程中,经常会用到代码的展示。而不同颜色的代码,可以让代码看起来更直观,也更美观。highlight的插件简单又使用。

比如下面这样的
000.png

使用方法:

选择常用的语言

https://highlightjs.org/
00.png
点击Get version按钮进入语言选择,勾选你常用的语言,引用JS文件后会自动检测你要展示的代码的语言,并自动让代码高亮,默认勾选common的就够用了,如果你有别的特殊的可往下滑动并勾选响应的语言

0.png

下载highlight文件

369ff206a47e46639c90c279238e4546.png
styles目录下是所有的css样式,决定代码的颜色;highlight.pack.js为库文件,决定代码哪些部分会变高亮

如果不知道选哪种高亮模式可以查看官网提供的demo,然后选择一个自己最喜欢的样式即可,个人比较喜欢黑色背景,所以选择了atom-one-dark.css

如果你不需要用到其他样式切换,可以删除使用的css之外的其他css文件以减少包的大小

使用的页面导入css及js文件

补充一句常识,但常常可能被忽视的:它的加载顺序依次是下面这样子

<link href="https://www.mochengli.cn/usr/themes/otk/assets/hljs/styles/atom-one-dark.css" rel="stylesheet"> //例如atom-one-dark.css
<script src="https://www.mochengli.cn/usr/themes/otk/assets/hljs/highlight.pack.js"></script>//引入高亮js文件
<script>hljs.initHighlightingOnLoad();</script>//开启高亮模式

最后就是把代码写在<pre><code>代码写在这里</code></pre>中就可以啦

为什么我们总是容易反反复复爱上渣男 打赏
请作者吃个鸡腿!
关于typecho评论失效的临时解决方法

该页面评论已关闭