highlight.js 代码高亮插件的使用详解

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

找了几个不同的插件，觉得highlight的插件比较实用，而且用起来炒鸡简单。

比如这样：

首先，我们先下载一个highlight的js文件。

https://highlightjs.org/

点击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这个样式的颜色，想要别的颜色自己改~

如果你的代码里包含标签，记得将标签的"<"换成"&lt"，把">"换成"&gt"喔~

到此这篇关于highlight.js 代码高亮插件的使用详解的文章就介绍到这了,更多相关highlight.js 代码高亮插件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • js使用highlight.js高亮你的代码

    js使用highlight.js高亮你的代码

    在逛别人的博客的时候,看见别人的代码的例子使用了高亮的语法,无论是java,js还是php等等语言,都会自动的对关键字进行高亮. 于是在前几天自己写了一个博客,遇到code时,自然就想到了别人网站如何漂亮,巴拉巴拉. 开始了正式的捣鼓. 在捣鼓之前去别的网站看了看.这里贴上简书的效果: 其中的关键字,方法名,字符串都有不同的颜色,虽然这个代码高亮得不是很好看,但还过得去.于是去看了看document,发现是这样的: <pre class="hljs javascript">

  • JS库之Highlight.js的用法详解

    JS库之Highlight.js的用法详解

    官网:https://highlightjs.org/ 下载地址:https://highlightjs.org/download/ 下载到本地后,新建个页面测试 1.在head中加入css和js的引用 <head> <title>highlight</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link r

  • JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】 原创

    JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】 原创

    本文实例讲述了JavaScript语法高亮库highlight.js用法.分享给大家供大家参考,具体如下: highlight.js是一款基于JavaScript的语法高亮库,目前支持125种编程语言,有63种可供选择的样式,而且能够做到语言自动识别,和目前主流的JS框架都能兼容,可以混合使用. 这款高亮库可以用在博客系统中,其使用方法及其简单,几乎不需要任何学习成本,下面介绍highlight.js的使用. 1.获取highlight.js库,用户可以从官网获取: 地址:https://hig

  • 代码块高亮可复制显示js插件highlight.js+clipboard.js整合

    代码块高亮可复制显示js插件highlight.js+clipboard.js整合

    主要从两个方面入手了: 1.高亮显示/换行 2.复制代码按钮 这两方面都有现成的插件. 代码高亮插件--highlight.js 1.下载highlight的js文件. https://highlightjs.org/ 点击get version按钮进入语言选择 勾选常用语言,通常common就足够用了. 点击download,下载,解压,里面会有js文件和css文件. js文件决定哪些部分高亮,css决定代码颜色 2.在解压后的文件里找到一个highlight.pack.js文件,在使用时导入

  • highlight.js 代码高亮插件的使用详解

    highlight.js 代码高亮插件的使用详解

    在网页使用过程中,经常会用到代码的展示.而不同颜色的代码,可以让代码看起来更直观,也更美观. 找了几个不同的插件,觉得highlight的插件比较实用,而且用起来炒鸡简单. 比如这样: 首先,我们先下载一个highlight的js文件. https://highlightjs.org/ 点击get version按钮进入语言选择 勾选你常用的语言,在使用插件时会自动检测你要展示的代码的语言,并自动让代码高亮.通常common就足够用了. 然后点击下面的download按钮,下载,解压,里面会有j

  • JS代码计算LocalStorage容量示例详解

    JS代码计算LocalStorage容量示例详解

    目录 LocalStorage 容量 计算总容量 已使用容量 剩余可用容量 LocalStorage 容量 localStorage的容量大家都知道是5M,但是却很少人知道怎么去验证,而且某些场景需要计算localStorage的剩余容量时,就需要我们掌握计算容量的技能了~~ 计算总容量 我们以10KB一个单位,也就是10240B,1024B就是10240个字节的大小,我们不断往localStorage中累加存入10KB,等到超出最大存储时,会报错,那个时候统计出所有累积的大小,就是总存储量了!

  • vue.js实现日历插件使用方法详解

    vue.js实现日历插件使用方法详解

    今天要实现的功能就是以下这个功能:vue.js模拟日历插件 好了废话不多说了 直接上代码了 css: *{ margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #app{ width: 1000px; margin: 10px auto; } .calender{ width: 1000px; } .calender table{

  • jquery.tableSort.js表格排序插件使用方法详解

    jquery.tableSort.js表格排序插件使用方法详解

    本文实例为大家分享了jquery.tableSort.js表格排序的具体代码,供大家参考,具体内容如下 1.一定要引jQuery包,所有jq插件都是基于jQuery包的 2.如果想指定哪一栏不排序这样写 $("#mytable").tablesorter({headers:{5:{sorter:false}}}); 第5列的sorter为false就OK了 参考:http://www.jb51.net/article/105217.htm <!DOCTYPE html> &

  • TableSort.js表格排序插件使用方法详解

    本文实例为大家分享了TableSort.js表格排序的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>TableSort</title> <style type="text/css"> table { bor

  • vue.js国际化 vue-i18n插件的使用详解

    安装方法 1.使用CDN直接引用 <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script> 2.NPM $ npm install vue-i18n 3.Yarn $ yarn add vue-i18n 使用方法 在这里只介绍v

  • CountUp.js数字滚动插件使用方法详解

    CountUp.js数字滚动插件使用方法详解

    CountUp.js 是一个轻量级,无依赖的JavaScript类,通过简单的设置就可以达到数字滚动的效果 演示地址: countUp.js 可配置项: target = 目标元素的 ID: startVal = 开始值: endVal = 结束值: decimals = 小数位数,默认值是0: duration = 动画延迟秒数,默认值是2: //用法: var options = { useEasing: true, useGrouping: true, separator: ',', de

  • 2014最热门的JavaScript代码高亮插件推荐

    2014最热门的JavaScript代码高亮插件推荐

    对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高性能的JavaScript代码高亮插件,这些JavaScript代码高亮插件将非常有效地帮你实现在网页上的代码编辑和展示. 1.SyntaxHighlighter – 最优秀的JavaScript代码高亮插件 SyntaxHighlighter 是一款完全基于JavaScript的代码高亮插件,Sy

  • ckeditor syntaxhighlighter代码高亮插件配置分享

    ckeditor syntaxhighlighter代码高亮插件配置分享

    最近由于自己想做一个网站形式的代码库,自已写一个在线文本编辑器,对于现在的我来,确实是很不切实际,呵呵!再说了,现在有一个非常好的在线文本编辑器(ckeditor)了,我和必再去费这等功夫呢!有现成的,拿过用就是的呗!正所谓的拿来主义!不过这个在线文本编辑器,对于我们程序员来说有一个算是缺陷吧!没有代码高亮的功能!这样把代码贴上去,很不好看!今天晚上,我总是把他给弄出来了.当然也采在别人的肩膀上做成的.在此感谢他们的分享!费话不多说了!咱们进入正题吧! 首先去官方网站下载个ckeditor 其次

  • JS前端可扩展的低代码UI框架Sunmao使用详解

    JS前端可扩展的低代码UI框架Sunmao使用详解

    目录 引言 设计原则 1. 明确不同角色的职责 2. 发挥代码的威力,而不是限制 3. 各个层面的可扩展性 4. 专注而不是发散 Sunmao 的工作原理 响应最新的状态 组件间交互 布局与样式 类型安全 在组件间复用代码 可扩展的可视化编辑器 保持开放 引言 尽管现在越来越多的人开始对低代码开发感兴趣,但已有低代码方案的一些局限性仍然让大家有所保留.其中最常见的担忧莫过于低代码缺乏灵活性以及容易被厂商锁定. 显然这样的担忧是合理的,因为大家都不希望在实现特定功能的时候才发现低代码平台无法支持,

随机推荐