这篇文章主要介绍了vue使用showdown并实现代码区域高亮的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前言：当我们想把makedown文档转译为html在网页上显示，并且能漂亮的展示出自己想要的网页形式，接下来我给大家介绍插件来达到我们所想要的功能。
注：下面安装及使用方式是基于vue进行滴。
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并实现代码区域高亮的示例代码的详细内容，更多请关注0133技术站其它相关文章！
