最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
highlight.js代码高亮插件的使用解析
时间：2022-06-29 01:58:52 编辑：袖梨 来源：一聚教程网
本篇文章小编给大家分享一下highlight.js代码高亮插件的使用解析，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。
比如这样：
首先，我们先下载一个highlight的js文件。
https://highlightjs.org/
点击get version按钮进入语言选择
勾选你常用的语言，在使用插件时会自动检测你要展示的代码的语言，并自动让代码高亮。通常common就足够用了。
然后点击下面的download按钮，下载，解压，里面会有js文件和css文件。
js文件决定你的代码哪些部分会变高亮，css文件决定你的代码会变成什么颜色~
在解压后的文件里找到一个highlight.pack.js文件，在使用时导入这个js文件。
打开里面的styles文件，里面有很多的css文件。这些文件可以更改你的展示代码的css样式，包括高亮的颜色和背景色(主题色)。
在使用时想使用那种样式只需要导入这个样式的css文件即可。看不懂这些英文都代表的什么样式？这个网址有各个css文件的效果展示：https://highlightjs.org/static/demo/
这里我选择了一个dark.css文件：
导入js文件和css文件后然后就可以使用了。
在使用时，一定要将你要展示的代码包在
比如这样：
原则上系统会自动检测你的代码的内容，不过如果你不放心的话，可以在标签中用代码用到的语言起一个class名
比如这样：
好啦，让我们看一下效果：
这个只是dark.css这个样式的颜色，想要别的颜色自己改~
如果你的代码里包含标签，记得将标签的"<"换成"<"，把">"换成">"喔~
相关文章
- 《无限暖暖》天星之羽获得位置介绍 12-20
- 《流放之路2》重铸台解锁方法介绍 12-20
- 《无限暖暖》瞄准那个亮亮的成就怎么做 12-20
- 《无限暖暖》魔气怪终结者完成方法 12-20
- 《无限暖暖》曙光毛团获得位置介绍 12-20
- 《无限暖暖》日光果获得位置介绍 12-20