当前位置：首页 > news >正文

highlight.js

news 来源：原创 2025/5/13 19:58:32

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>; }