摘要：介绍 highlight.js 的基本用法，包括浏览器端和 Node.js 环境下的应用，支持多种编程语言和主题样式。

Highlight.js 的基本用法

一、浏览器端使用

      首先，通过 CDN 引入 highlight.js 核心库和样式文件：

<!-- 引入核心库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

<!-- 引入主题样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">

      然后，在 HTML 中添加代码块：

<pre><code class="language-javascript">
function hello() {
  console.log("Hello, highlight.js!");
}
</code></pre>

      最后，初始化 highlight.js：

document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('pre code').forEach((block) => {
    hljs.highlightElement(block);
  });
});

二、支持的语言和主题

      highlight.js 支持多种语言，例如 JavaScript、Python、Java 等。

| 语言        | class 写法            |
|-------------|-----------------------|
| JavaScript  | language-javascript   |
| HTML/XML    | language-html         |
| CSS         | language-css          |
| Python      | language-python       |
| Java        | language-java         |
| C++         | language-cpp          |
| SQL         | language-sql          |

      主题样式有多种选择，例如 atom-one-dark、stackoverflow-light 等。

三、Node.js 环境使用

      安装 highlight.js：

npm install highlight.js

      在 Node.js 中使用：

const hljs = require('highlight.js');

const code = `
function hello() {
  console.log("Hello from Node.js");
}
`;

const highlightedCode = hljs.highlight(code, { language: 'javascript' }).value;

console.log(highlightedCode);

四、其他功能

      highlight.js 还支持行号、代码复制按钮等功能。

五、小提示

      如果使用 Vue、React 等框架，有相应的封装组件可用。