威言威语
我愿像茶,苦涩留心,清香予人。
威言威语
当前位置: 首页 > 设计 > 正文

使用highlight.js来实现代码高亮

highlight.js是一款基于JavaScript的语法高亮库,能够让网页上的代码显示接近我们使用的代码编辑器的高亮样式,从而看起来更舒服,增强阅读体验。
使用highlight.js来实现代码高亮
目录
文章目录隐藏
  1. highlight.js的技术特性
  2. 如何使用highlight.js
  3. 对比

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

highlight.js是一款基于JavaScript的语法高亮库,能够让网页上的代码显示接近我们使用的代码编辑器的高亮样式,从而看起来更舒服,增强阅读体验。

highlight.js的技术特性

支持 197 种开发语言和 248 种代码高亮风格主题
自动语言检测
支持多种语言混合代码同时高亮
支持 npm 安装,可以在 Vue.js 中使用,也可以在 node.js 中使用
适用于任何标记
无依赖,兼容任何js框架

如何使用highlight.js

1、获取highlight.js库

官网地址:https://highlightjs.org/

点击Get version按钮进入语言选择,勾选你常用的语言,在使用插件时会自动检测你要展示的代码的语言,并自动让代码高亮。通常common就足够用了。

选好后点击下面的download按钮,下载,解压。里面styles目录下是所有的css样式,决定代码的颜色;highlight.min.js 为库文件,决定代码哪些部分会变高亮。

2、在html页面中引入js和css文件

<link rel="stylesheet" href="/styles/default.min.css">
<script src="/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

这将在其中找到并突出显示代码的 <pre><code> 标签,它会尝试自动检测语言。 当然你也可以在使用中手动指定语言 class属性:


<pre><code class="language-html">
这里写代码
</code></pre>

如果你的代码里包含标签,需要进行转义,记得将标签里的 < 换成&lt;,把 > 换成 &gt;

官网提供了详尽的使用文档,有更多代码高亮的控制方法,可以点击查看:https://highlightjs.org/usage/

3、Highlight.js如何支持显示行号

highlight.js 默认不支持显示行号,它的作者说了一大堆不支持行号的理由,但是我觉得还是非常需要的。

找到了一个不错的插件,highlight.ln.js,只要引用这个js,不用其他的配置就能实现显示行号,数字和边框颜色将继承选择的主题颜色。比网上其他方式要方便一些,大家可以尝试一下。

预览:https://taufik-nurrohman.js.org/highlight.ln.js/

对比

其实相比 highlight.js ,我更加喜欢 Prism.js,虽说 highlight.js 可以自动检测代码语言,但是我认为大家贴代码的时候都会写上语言名字的,所以花很多功夫实现一个自动语法检测好像没有太大的意义,同时还不支持行号。

Prism.js 有挺多插件,同时在打包使用的时候可以直接选择上需要的插件,比如我需要行号和代码复制,就勾选上这2个插件,他就可以直接打包在一起,非常方便。

推荐阅读:使用Prism.js来实现代码高亮

您可能还会对这些文章感兴趣!

使用highlight.js来实现代码高亮:目前有 2 条评论

  1. 引路人
    板凳
    引路人:Internet Explorer 7.0 Windows 7

    highlight.js 也不支持代码复制和预览,网上看的添加教程大多看不太懂。

    2008-09-18 15:14 回复
  2. fittecc
    沙发
    fittecc:360安全浏览器 Windows XP

    简单使用的话,效果还是不错的。

    2008-06-22 22:34 回复

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

gravatar

question razz sad smile redface biggrin eek shock confused cool lol mad rolleyes wink cry