在前端开发中，高亮显示代码块可以让页面更直观、更易读。而 Highlight.js 是一个开源的代码高亮库，支持多种编程语言，并能够自定义样式。其中，nord-highlightjs 是一款基于 Highlight.js 的样式主题，它的配色以北欧风格为基础，融合了一些现代感的元素，非常适合用于现代应用程序的代码高亮显示。本文将为大家介绍如何使用 npm 包 nord-highlightjs 来实现代码高亮显示。
安装 nord-highlightjs
如果你已经有了 Node.js 和 npm 环境，那么安装 nord-highlightjs 就非常简单了。在终端中执行以下命令即可：
npm install nord-highlightjs
这会将 nord-highlightjs 包下载并安装到你的项目中。
包导入和使用
- 将 nord-highlightjs CSS 导入你的页面中
你可以选择直接将 nord-highlightjs 的样式文件导入你的 HTML 页面中：
<head> <link rel="stylesheet" href="./node_modules/nord-highlightjs/build/nord.min.css"> </head>
- 配置 highlight.js
确保在 nord-highlightjs 样式文件之后，正确导入 Highlight.js：
<head> <link rel="stylesheet" href="./node_modules/nord-highlightjs/build/nord.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/highlight.min.js"></script> </head>
- 高亮你的代码
在 HTML 文件中，你可以使用如下代码来高亮一段代码：
<pre><code class="hljs javascript">
function helloWorld() {
console.log('Hello, world!');
}
</code></pre>其中，class 属性的值为 “hljs [language]”，指定需要高亮的语言。
你还可以使用类似下面的 Javascript 代码自动高亮所有的代码块：
document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightBlock(block);
});示例代码
以下是一个完整的代码示例。HTML 文件：
-- -------------------- ---- -------
--------- -----
------
------
----------------------- ------------
----- ---------------- ----------------------------------------------------------
------- -------------------------------------------------------------------------------------------
-------
------
---------- ----------- ------------
-------- ------------ -
------------------- ---------
-
-------------
---------- ----------- --------
--- --------------
------------- --------
-------------
--------
------------------------------ ---------------------- -- -
---------------------------
---
---------
-------
-------在这个例子中，我们使用了两种不同的语言（Javascript 和 Python）高亮显示了两段代码块。
结论
使用 nord-highlightjs 可以为你的 Web 应用程序提供漂亮的代码高亮效果。在本文中，我们介绍了如何安装和使用这个 npm 包，并提供了示例代码。希望这对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600564ef81e8991b448e1915