npm 包 hypelight 使用教程

阅读时长 4 分钟读完

在 Web 开发中,代码高亮是一个非常常见的需求。一般情况下,我们可以使用一些库来实现代码高亮,比如 highlight.jsPrism 等。这些库都能够很好地实现代码高亮,但是它们的体积比较大,而且有时候需要手动配置语言支持,使用起来较为麻烦。

今天我们来介绍一个轻量级的代码高亮库——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

纠错
反馈