Vue3.0中使用 highlight 实现代码高亮

目录

1、安装highlight.js与@highlightjs/vue-plugin

2、在main.js中引用

3、组件中使用

4、代码展示

---

在页面中 编写代码 想要实现代码高亮，如下图。

可使用highlight

1、安装highlight.js与@highlightjs/vue-plugin

注意：highlight.js与 @highlightjs/vue-plugin必须都安装

npm install --save highlight.js
 
npm install --save @highlightjs/vue-plugin

2、在main.js中引用

import 'highlight.js/styles/atom-one-dark.css'
import 'highlight.js/lib/common'
import hljsVuePlugin from '@highlightjs/vue-plugin'
 
//注册组件
const app = createApp(App)
 
app.use(hljsVuePlugin)

3、组件中使用

<div>
  <highlightjs language="JavaScript" :autodetect="false" :code="code">        
  </highlightjs>
</div>
 
 
js部分：
let code = 'console.log('aaa')'

4、代码展示

<template>
    <highlightjs language="JavaScript" :autodetect="false" :code="code"></highlightjs>
</template>

<script setup>
    let code = `npm install --save highlight.js`
</script>

最后，感谢您的阅读。

你学到了什么，欢迎补充！！

 欢迎大家留言讨论，祝工作顺利、生活愉快！ 

VueFastDev - 前端快速开发工具