在 Web 开发中，代码高亮是一个非常常见的需求。一般情况下，我们可以使用一些库来实现代码高亮，比如 highlight.js、Prism 等。这些库都能够很好地实现代码高亮，但是它们的体积比较大，而且有时候需要手动配置语言支持，使用起来较为麻烦。
今天我们来介绍一个轻量级的代码高亮库——hypelight。hypelight 体积小、不依赖第三方库，支持自动检测代码语言，使用起来非常方便。
安装
hypelight 可以通过 npm 安装：
--- ------- ---------
也可以用 yarn 安装：
---- --- ---------
使用
hypelight 的使用非常简单，只需要引入 hypelight 的 CSS 和 JS 文件，然后在要高亮显示的代码块上添加 hljs 类名即可，如下所示：
--------- -----
----- ----------
------
----- ----------------
---------------- ----------
----- ---------------- ------------------------
-------
------
---------- -------------------------------- ----------------------
------- -------------------------------
-------
-------如果要使用其他语言的高亮，只需要在 code 标签的的 class 属性中添加对应的语言类名即可，如下所示：
----- ----------- --------------------- ---------------
支持的语言包括：
- apache
- bash
- cpp
- cs
- css
- diff
- http
- ini
- java
- javascript
- json
- makefile
- markdown
- nginx
- objectivec
- php
- python
- ruby
- sql
- swift
- xml
自定义样式
hypelight 提供了一些自定义样式的选项，用户可以根据自己的需要进行修改。下面是一些常见的自定义样式选项及其作用：
hljs.default
该样式表示默认的代码高亮样式，如果不想修改其他样式，只是想改变代码高亮的样式，可以修改该样式。
------------- - ------ ----- - ------------- -------- - ------ -------- - ------------- ------- - ------ ----- - ------------- ------- - ------ ----- -
hljs.comment
该样式表示注释的样式。
------------- - ------ ----- -
hljs.string
该样式表示字符串的样式。
------------ - ------ ----- -
hljs.number
该样式表示数字的样式。
------------ - ------ ----- -
hljs.function
该样式表示函数的样式。
-------------- - ------ -------- -
总结
hypelight 是一个轻量级的代码高亮库，体积小、使用方便。在实际开发中，利用它可以让我们的代码更加清晰易懂，提高代码阅读体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedb46bb5cbfe1ea061127a