在 Web 开发中,代码高亮是一个非常常见的需求。一般情况下,我们可以使用一些库来实现代码高亮,比如 highlight.js、Prism 等。这些库都能够很好地实现代码高亮,但是它们的体积比较大,而且有时候需要手动配置语言支持,使用起来较为麻烦。
今天我们来介绍一个轻量级的代码高亮库——hypelight。hypelight 体积小、不依赖第三方库,支持自动检测代码语言,使用起来非常方便。
安装
hypelight 可以通过 npm 安装:
npm install hypelight
也可以用 yarn 安装:
yarn add hypelight
使用
hypelight 的使用非常简单,只需要引入 hypelight 的 CSS 和 JS 文件,然后在要高亮显示的代码块上添加 hljs
类名即可,如下所示:
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------------- ---------- ----- ---------------- ------------------------ ------- ------ ---------- -------------------------------- ---------------------- ------- ------------------------------- ------- -------
如果要使用其他语言的高亮,只需要在 code
标签的的 class
属性中添加对应的语言类名即可,如下所示:
<code class="hljs python">print('Hello, world!')</code>
支持的语言包括:
- 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.comment { color: #999; }
hljs.string
该样式表示字符串的样式。
.hljs.string { color: #d14; }
hljs.number
该样式表示数字的样式。
.hljs.number { color: #999; }
hljs.function
该样式表示函数的样式。
.hljs.function { color: #0086b3; }
总结
hypelight 是一个轻量级的代码高亮库,体积小、使用方便。在实际开发中,利用它可以让我们的代码更加清晰易懂,提高代码阅读体验。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5eedb46bb5cbfe1ea061127a