怎么在vue中利用showdown实现代码区域高亮

怎么在vue中利用showdown实现代码区域高亮？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

1、安装showdown

npminstallshowdown--save

2、将showdown引入到使用的页面中

最终展示效果

但是这时有个问题出现，如果我们去添加代码块儿时，代码是统一颜色，代码块也没有背景色，同时也没有高亮样式，接下来我们解决代码没有高亮问题。

1、安装highlight

npminstallhighlight--save

2、 在main.js添加自定义指令

importhljsfrom"highlight.js"
import'highlight.js/styles/default.css';

//定义自定义指令highlight代码高亮
Vue.directive('highlight',function(el){
letblocks=el.querySelectorAll('precode');
blocks.forEach((block)=>{
hljs.highlightBlock(block)
})
})

3、 将“ v-highlight ”添加到使用的div标签上

效果如下：

看完上述内容，你们掌握怎么在vue中利用showdown实现代码区域高亮的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注恰卡编程网行业资讯频道，感谢各位的阅读！