vue3+highlight js/vue-插件实现页面上片段代码高亮

MrLi-2018

已于 2022-07-21 16:28:27 修改

阅读量1.3k

点赞数

分类专栏： vue3 文章标签： javascript vue.js 前端

于 2022-07-21 15:59:22 首次发布

版权

6 篇文章

订阅专栏

先看效果

首先安装

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

在main.ts中引入

import HljsVuePlugin from '@highlightjs/vue-plugin'
import 'highlight.js/styles/atom-one-dark.css'
import 'highlight.js/lib/common'

app.use(HljsVuePlugin).mount("#app")

在组件中引用

<highlightjs autodetect :code="codeHtml"/>



 codeHtml: `
    <div class='demo'>
        <p class='int'>hello Word</p>
    </div>
    `