vue3 highlightjs怎么使用
时间: 2024-10-08 18:18:17 浏览: 7
Vue3 中使用 Highlight.js 可以给你的代码块添加语法高亮显示,让代码看起来更专业。首先,你需要安装 Highlight.js 和 Vue 的相关插件。以下是基本步骤:
1. **安装依赖**:
- 使用 npm 或 yarn 安装 Highlight.js:
```bash
npm install highlight.js @vueuse/core
# 或者
yarn add highlight.js @vueuse/core
```
2. **引入库**:
在你的项目中引入 highlight.js 和 VueUse 的 use 插件,如果你使用 ES 模块:
```javascript
import { use } from '@vueuse/core';
import hljs from 'highlight.js';
```
如果是 CommonJS (如 Node.js):
```javascript
const { use } = require('@vueuse/core');
const hljs = require('highlight.js');
```
3. **设置 Highlight.js**:
在 Vue 组件中使用 `use` 函数创建 Highlight.js 的实例,并配置其语言(如果需要自定义):
```javascript
const highlighter = use(hljs);
highlighter.init({ languages: ['javascript', 'html'] }); // 初始化支持的语言
```
4. **在模板中应用高亮**:
使用 `v-html` 或 `render` 特性将 HTML 代码插入到 DOM 并动态应用高亮:
```html
<pre v-html="formattedCode"></pre>
```
或者:
```html
<template>
<div ref="codeBlock" :innerHTML="formattedCode" />
</template>
<script setup>
const code = `your_code_here`;
const formattedCode = highlighter.highlight(code, { language: 'javascript' }).value;
</script>
```
5. **处理实时更新**:
如果代码内容有实时变化,可以在数据改变时调用 `hljs.highlight` 更新高亮。
6. **样式**:
高亮样式通常由 Highlight.js 自带,你可以通过 CSS 进行定制。也可以选择使用外部主题文件或者直接引用 Highlight.js 提供的 CSS。
注意:确保你的页面上有一个 `<style>` 标签用于引入 Highlight.js 的 CSS,或者将其放在单独的 CSS 文件中。