starwait/docs/f01-mrkdown/marked/highlight.js.md

按需导入

// 导入核心库和所需语言
import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
import xml from 'highlight.js/lib/languages/xml';

// 注册语言
hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('xml', xml);

// 使用接口
const code = '<div>Test</div>';
const result = hljs.highlight(code, { language: 'xml' }).value;
console.log(result);

全部导入

import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';

关键接口说明

• highlightAll()
  自动检测页面中所有 <pre><code> 块的代码语言并高亮。

• highlight(code, { language })
  手动指定语言高亮代码（需提前注册对应语言）。

• highlightAuto(code)
  自动检测语言并高亮，返回包含语言类型和高亮结果的对象。

• registerLanguage(langName, languageDefinition)
  注册自定义或第三方语言模块。

注意事项

• 主题切换：替换 CSS 文件路径即可（如 styles/default.min.css → styles/monokai-sublime.min.css）3。

• TypeScript 类型：安装 @types/highlight.js 或自定义类型声明（参考此方案）6。

• 性能优化：动态加载语言模块（如通过 import() 动态导入）10。