highlight.js 代码高亮插件的使用详解
在网页使用过程中，经常会用到代码的展示。而不同颜色的代码，可以让代码看起来更直观，也更美观。
找了几个不同的插件，觉得highlight的插件比较实用，而且用起来炒鸡简单。
比如这样：
首先，我们先下载一个highlight的js文件。
点击get version按钮进入语言选择
勾选你常用的语言，在使用插件时会自动检测你要展示的代码的语言，并自动让代码高亮。通常common就足够用了。
然后点击下面的download按钮，下载，解压，里面会有js文件和css文件。
js文件决定你的代码哪些部分会变高亮，css文件决定你的代码会变成什么颜色~
在解压后的文件里找到一个highlight.pack.js文件，在使用时导入这个js文件。
<script src="js/jquery-3.1.1.js"></script> <script src="js/highlight.pack.js"></script>
打开里面的styles文件，里面有很多的css文件。这些文件可以更改你的展示代码的css样式，包括高亮的颜色和背景色(主题色)。
在使用时想使用那种样式只需要导入这个样式的css文件即可。看不懂这些英文都代表的什么样式？这个网址有各个css文件的效果展示：https://highlightjs.org/static/demo/
这里我选择了一个dark.css文件：
<link rel="stylesheet" type="text/css" href="css/dark.css" rel="external nofollow" />
导入js文件和css文件后然后就可以使用了。
在使用时，一定要将你要展示的代码包在<pre><code></code></pre>标签里！！！
比如这样：
原则上系统会自动检测你的代码的内容，不过如果你不放心的话，可以在<code>标签中用代码用到的语言起一个class名
比如这样：
好啦，让我们看一下效果：
这个只是dark.css这个样式的颜色，想要别的颜色自己改~
如果你的代码里包含标签，记得将标签的"<"换成"<"，把">"换成">"喔~
到此这篇关于highlight.js 代码高亮插件的使用详解的文章就介绍到这了,更多相关highlight.js 代码高亮插件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vuex是基于vuex.js的状态管理工具,可以把它理解为一个仓库,下面这篇文章主要给大家介绍了关于uniapp中如何使用vuex并持久化的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
引入 TypeScript 到 Electron 项目可以帮助你捕捉错误并在编写代码时提供更好的自动完成和文档，这篇文章主要介绍了electron使用typescript的步骤,需要的朋友可以参考下2024-04-04
跟我学习javascript的for循环和for...in循环
跟我学习javascript的for循环和for...in循环，它们是JavaScript中提供了两种方式迭代对象，本文就和大家一起学习for循环和for...in循环，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要为大家详细介绍了微信小程序云开发实现云数据库读写权限，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
这篇文章主要为大家详细介绍了Bootstrap中datetimepicker的使用方法，一款功能强大的日期选择控件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要为大家详细介绍了在前端开发中,常见的跨域解决方案,文中的示例代码讲解详细,具有一定的参考价值,有需要的小伙伴可以了解下2023-09-09
这篇文章主要介绍了微信小程序3D轮播实现代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了微信小程序js文件改变参数并在视图上及时更新的实现代码，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2018-06-06
JavaScript实现将阿拉伯数字转换成中文或大写中文的方法
现在有需求将亿元之内的阿拉伯数字转换成中文,例如：1234转换后变为一千二百三十四再转换成壹仟贰佰叁拾肆,所以本文给大家介绍了用JavaScript实现将阿拉伯数字转换成中文大写,感兴趣的小伙伴跟着小编一起来看看吧2024-11-11
作为一门类型安全的编程语言，TypeScript 提供了多种内置数据类型，帮助我们更好地定义和操作数据，下面小编就来和大家详细聊聊这些数据类型的相关知识吧2023-06-06
最新评论