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

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

1、安装showdown

npminstallshowdown--save

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

<template>
<divv-html="htms"></div>
</template>

<script>
importshowdownfrom"showdown"
converter.setOption('tables',true);//将表格显示出来
exportdefault{
data(){
return{
htms:""
}
},
created(){
this.setMakedown()
},
methods:{
setMakedown(){
this.htms=converter.makeHtml('#这是一个标题')
}
}
}
</script>

最终展示效果

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

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标签上

<template>
<divv-html="htms"v-highlight></div>
</template>

效果如下：

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