北京官网天津seo优化
highlight.js
highlight.js 是一个用于 代码语法高亮 的 JavaScript 库，支持 190+ 种编程语言和 90+ 种主题样式，广泛应用于技术博客、文档网站和代码编辑器等场景。
官网与文档
• 官网地址：https://highlightjs.org/
• GitHub 仓库：https://github.com/highlightjs/highlight.js
• 主题预览：https://highlightjs.org/static/demo/
核心特性
• 自动语言检测：无需指定语言，自动识别代码类型。
• 多语言支持：涵盖主流语言（如 JavaScript、Python、HTML、CSS）。
• 主题丰富：内置多种高亮主题（如 github-dark、atom-one-dark）。
• 轻量级：支持按需加载语言和主题，减少体积。
安装方法
1. npm/yarn/pnpm 安装
pnpm add highlight.js
2. CDN 引入
<!-- 核心库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script><!-- 主题样式（以 github-dark 为例） -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css"
>
基础用法
1. HTML 中直接使用
<pre><code class="language-javascript">function hello() {console.log("Hello, World!");}
</code></pre><script>// 初始化高亮hljs.highlightAll();
</script>
2. 在 React/Vue 中使用
// React 示例
import { useEffect } from 'react';
import hljs from 'highlight.js';
import 'highlight.js/styles/github-dark.css';export default function CodeBlock() {useEffect(() => {hljs.highlightAll();}, []);return (<pre><code className="language-javascript">{`function sum(a, b) { return a + b; }`}</code></pre>);
}
高级用法
1. 手动指定语言
const code = `<div class="container">Hello</div>`;
const result = hljs.highlight(code, { language: 'html' }).value;
document.getElementById("output").innerHTML = result;
2. 动态加载语言（按需加载）
import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';// 注册 JavaScript 语言
hljs.registerLanguage('javascript', javascript);
hljs.highlightAll();
3. 自定义主题
// 修改默认主题
import 'highlight.js/styles/atom-one-dark.css';
配置选项
| 选项 | 说明 |
|---|---|
ignoreUnescapedHTML | 是否忽略未转义的 HTML（默认 false，设为 true 可防 XSS） |
languages | 指定允许自动检测的语言列表（如 ['javascript', 'python']） |
classPrefix | CSS 类名前缀（默认 hljs-） |
注意事项
• SPA 应用：页面动态加载后需重新调用 hljs.highlightAll()。
• 性能优化：按需加载语言和主题，避免引入全部文件。
• XSS 防护：确保代码内容安全，避免直接渲染用户输入的内容。
示例效果
// 高亮前
function example() { return "Hello"; }// 高亮后（使用 atom-one-dark 主题）
<span class="hljs-keyword">function</span> <span class="hljs-title function_">example</span>() { <span class="hljs-keyword">return</span> <span class="hljs-string">"Hello"</span>; }
替代方案
• Prism.js：https://prismjs.com/
更轻量，但需手动指定语言。
通过 highlight.js，你可以快速为网页中的代码块添加美观的高亮效果。