highlight.js 网站代码片段高亮

1. 快速集成（CDN方式）
2. 进阶配置
3. 注意事项
4. 常见问题
示例代码

1. 快速集成（CDN方式）

引入资源
在HTML的<head>中添加CSS主题和核心JS文件（以Monokai主题为例）：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/monokai.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>

• 注意：主题可替换为其他内置选项如github.css、atom-one-dark.css等。

标记代码块
用<pre><code>包裹代码，并通过类名指定语言（如language-javascript）：
```
<pre><code class="language-javascript">
function hello() { 
  console.log("Hello World!");
}
</code></pre>
```
• 支持自动检测语言，但建议显式指定以提升准确性。

初始化高亮
在页面底部调用全局高亮方法：

<script>
  // 页面加载完成后自动高亮所有代码块
  document.addEventListener('DOMContentLoaded', () => hljs.highlightAll());
</script>

• 若动态加载内容（如AJAX），需手动调用hljs.highlightElement(element)。

2. 进阶配置

自定义主题

• 切换主题：替换CSS文件链接，例如使用atom-one-dark：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">

• 官方提供主题预览页面供选择。

覆盖默认样式

通过自定义CSS修改高亮颜色（如关键字改为粉色）：

/* 自定义样式文件 */
.hljs-keyword {
  color: #f92672;  /* 粉色关键字 */
}
.hljs-string {
  color: #e6db74;  /* 黄色字符串 */
}

在HTML中引入自定义CSS文件即可生效。

动态内容处理

对于动态生成的代码块（如通过JavaScript插入）：

// 手动高亮新插入的代码块
const newCodeBlock = document.getElementById('dynamic-code');
hljs.highlightElement(newCodeBlock);

3. 注意事项

语言类名规范
• 使用language-xxx格式（如language-python），确保语言支持列表见官网文档。
代码转义
• 若代码包含HTML标签（如<div>），需转义为<div>，否则可能被浏览器解析为DOM元素。
性能优化
• 若仅需支持部分语言，从官网定制下载页面选择所需语言以减少文件体积。

4. 常见问题

• 高亮失效：
• 检查CSS/JS文件路径是否正确。
• 确保调用hljs.highlightAll()时DOM已加载。
• 语言检测错误：
• 显式指定语言类名（如class="language-javascript"）。

示例代码

<!DOCTYPE html>
<html>
<head>
  <title>Highlight.js Demo</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/monokai.min.css">
</head>
<body>
  <pre><code class="language-python">
  def greet(name):
    print(f"Hello, {name}!")
  </code></pre>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
  <script>
    hljs.highlightAll();
  </script>
</body>
</html>

通过以上步骤，可在5分钟内完成代码高亮集成。如需进一步调整样式或功能，可参考官方文档。