vue中实现代码高亮，格式化

话不多说先上图

前一段时间写过一个关于js实现代码高亮的文章 https://mp.csdn.net/postedit/85159364

先在把他整合到vue中

首先先下载highlight.js文件  npm install highlight.js

在main.js中引入文件

//代码高亮文件引入
import hljs from 'highlight.js'
//样式文件,这里我选的是sublime样式，文件里面还有其他样式可供选择
import 'highlight.js/styles/monokai-sublime.css' 

在main.js中然后自定义指令

Vue.directive('highlight',function (el) {
    let blocks = el.querySelectorAll('pre code');
        blocks.forEach((block)=>{
        hljs.highlightBlock(block)
    })
})

位置如图

最后在组件中使用，同样还是要放在pre标签下的code标签里面

就这么简单，搞定

【右上角点个赞，谢谢】