在前端开发中，代码高亮是一个很常见的需求。而使用 highlight-syntax-es6 可以方便地实现 JavaScript 代码的高亮。本文将介绍如何使用 highlight-syntax-es6 这个 npm 包。
安装
使用 npm 安装 highlight-syntax-es6：
npm install highlight-syntax-es6
使用方法
引入包
使用 ES6 的 import 语法引入 highlight-syntax-es6 包：
import { highlight } from 'highlight-syntax-es6';选择 DOM 元素并高亮
选择需要高亮的 DOM 元素，并调用 highlight 函数即可：
const code = document.querySelector('#code');
highlight(code);配置选项
highlight 函数还可以接受一个可选的配置对象作为参数：
const options = {
language: 'JavaScript',
theme: 'vs'
};
highlight(code, options);目前支持的配置选项有：
- language：代码语言，默认为 JavaScript。
- theme：主题，包括 'vs'、'vs-dark' 和 'hc-black' 三种选择。
示例
以下是一个简单的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------------------- ------------
----- ---------------- --------------------------------------------------------------------------------------- --
------- -------------------------------------------------------------------------------------------
------- ---------------------------------------------------------------------------------------
-------
--- -
----------------- --------
-------- -----
---------- -----
-
--------
-------
------
---------- ----------
----- ------ -
----------------- -
--------- - -----
-
------- -
------------------------- ----- - ---------
-
-
----- --- ------- ------ -
------- -
--------------
------------------------- ---------
-
-
----- - - --- --------------
----------
-------------
--------
----- ---- - --------------------------------
----- ------- - -
--------- -------------
------ ----
--
--------------- ---------
---------
-------
-------运行结果如下所示：
从代码中可以看到，我们先引入了 highlight.js 的样式和脚本，以及 highlight-syntax-es6 包。在代码块中，我们使用了 ES6 的类和继承，并使用 highlight 函数对代码块进行了高亮。
结语
使用 highlight-syntax-es6 可以非常方便地实现 JavaScript 代码的高亮。在实际开发中，对于需要显示代码的页面或编辑器，这个工具会有很好的应用价值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005524c81e8991b448cfd2f