怎么在vue中利用showdown实现代码区域高亮？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
创新互联建站长期为上千多家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为和平企业提供专业的做网站、成都网站建设，和平网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。1、安装showdown
npm install showdown --save
2、将showdown引入到使用的页面中
最终展示效果
但是这时有个问题出现，如果我们去添加代码块儿时，代码是统一颜色，代码块也没有背景色，同时也没有高亮样式，接下来我们解决代码没有高亮问题。
1、安装highlight
npm install highlight --save
2、 在main.js添加自定义指令
import hljs from "highlight.js"
import 'highlight.js/styles/default.css';
// 定义自定义指令 highlight 代码高亮
Vue.directive('highlight',function (el) {
let blocks = el.querySelectorAll('pre code');
blocks.forEach((block)=>{
hljs.highlightBlock(block)
})
})3、 将“ v-highlight ”添加到使用的div标签上
效果如下：
看完上述内容，你们掌握怎么在vue中利用showdown实现代码区域高亮的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
