代码区域高亮highlight.js高亮代码实例（源代码）-优快云博客

本文链接：https://blog.youkuaiyun.com/suny2020/article/details/149566673

要使用 highlight.js 来高亮显示代码，需要引入它的 CSS 样式文件和 JavaScript 库，然后调用 hljs.highlightAll() 或 hljs.highlightElement() 方法。

先上高亮代码效果：

以下是一个基本的 HTML 示例，展示了如何使用 highlight.js：

<!DOCTYPE html>
<html>
<head>
  <title>highlight.js 代码高亮示例</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css">
  <style>
    /* 可选的自定义样式，例如设置代码块的背景色 */
    pre code {
      background-color: #f5f5f5;
      padding: 15px;
      border-radius: 5px;
      overflow-x: auto; /* 当代码过长时显示滚动条 */
    }
  </style>
</head>
<body>

  <h1>highlight.js 代码高亮示例</h1>

  <h2>JavaScript 代码示例</h2>
  <pre><code class="language-javascript">
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("World");

const sum = (a, b) => a + b;
console.log(sum(5, 10));
  </code></pre>

  <h2>Python 代码示例</h2>
  <pre><code class="language-python">
def factorial(n):
    if n == 0:
        return 1
    else:
        return n * factorial(n-1)

num = 5
print(f"The factorial of {num} is {factorial(num)}")

for i in range(3):
    print(i)
  </code></pre>

  <h2>HTML 代码示例</h2>
  <pre><code class="language-xml">
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page</title>
</head>
<body>
  <header>
    <h1>Welcome</h1>
  </header>
  <main>
    <p>This is some content.</p>
  </main>
</body>
</html>
  </code></pre>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
  <script>
    // 在文档加载完成后，高亮所有 `<code>` 标签内的代码
    hljs.highlightAll();

    // 或者，如果你想手动高亮特定元素：
    // const jsCodeBlock = document.querySelector('pre code.language-javascript');
    // hljs.highlightElement(jsCodeBlock);
  </script>

</body>
</html>

代码块结构：

将你的代码放在 <pre><code> 标签中。

<pre> 标签用于保留代码中的空白符和换行符。
<code> 标签用于表示代码。
class="language-xxx" 是关键。它告诉 highlight.js 这段代码是什么语言（例如 language-javascript、language-python、language-html、language-css 等）。highlight.js 会根据这个类名来高亮代码。如果你不指定 class，highlight.js 会尝试自动检测语言。
引入 JavaScript 库：
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
```
这行代码引入了 highlight.js 的核心 JavaScript 库。highlight.min.js 包含了许多常用语言的定义。如果你只需要高亮少数特定语言，为了减小文件大小，你也可以只引入核心库 highlight.min.js，然后按需引入单个语言文件（例如 languages/python.min.js）。