43 lines
1.3 KiB
Markdown
43 lines
1.3 KiB
Markdown
## 按需导入
|
||
```js
|
||
// 导入核心库和所需语言
|
||
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);
|
||
```
|
||
|
||
## 全部导入
|
||
|
||
```js
|
||
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。 |