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

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

创新互联专注于秦都网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供秦都营销型网站建设，秦都网站制作、秦都网页设计、秦都网站官网定制、微信小程序服务，打造秦都网络公司原创品牌,更为您提供秦都网站排名全网营销落地服务。

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实现代码区域高亮的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！