前端在制作网页过程中,经常会用到代码的展示。而不同颜色的代码,可以让代码看起来更直观,也更美观。
网上找找了几个不同的插件,觉得highlight的插件实用而且用起来比较简单。
官方内容
首先,我们到官网下载一个highlight的js文件。
点击get version按钮进入语言选择,然后下载插件包
下载解压后打开里面的styles文件,里面有很多的css文件。这些文件可以更改你的展示代码的css样式,包括高亮的颜色和背景色(主题色)。
下载完成各个语言和css文件的效果展示:https://highlightjs.org/static/demo/
在这里可以直观看到每个语言对应每个样式主题的样子,大家选择自己喜欢的调用相应的css即可
具体的使用文档https://highlightjs.org/usage/
官方cdn
cdnjs
jsdelivr
unpkg
使用方法
在页面引入js和css以后,页面底部插入引用代码即可