一个兢兢业业、无微不至的保姆。你用自己的一只手——雪，把那青绿的麦苗爱抚地搂在怀里，给他以温暖和关怀。麦苗在那层层棉被下静静地期待，期待着来春生长发育。蛇、鳝、熊等等，有的钻进了深泥，有的藏入树洞，休息一冬，养精蓄锐，方有新春来到时的精神振奋。你用自己的另一只手――寒风，举刀挥剑，把那些残害农作物的害虫，砍光杀尽，把那些残害人类、牲畜的虎豹豺豺狼驱赶进深山老林。冬呵！你严守阵地，不容侵犯；你，是一位最负责任的对友火热温情，对敌残忍无情的好保姆。
前言：当我们想把makedown文档转译为html在网页上显示，并且能漂亮的展示出自己想要的网页形式，接下来我给大家介绍插件来达到我们所想要的功能。 注：下面安装及使用方式是基于vue进行滴。
1、安装showdown
npm install showdown --save
2、将showdown引入到使用的页面中
<template>
<div v-html="htms"></div>
</template>
<script>
import showdown from "showdown"
converter.setOption('tables', true); // 将表格显示出来
export default {
data() {
return {
htms: ""
}
},
created() {
this.setMakedown()
},
methods: {
setMakedown() {
this.htms = converter.makeHtml('# 这是一个标题')
}
}
}
</script>
最终展示效果
但是这时有个问题出现，如果我们去添加代码块儿时，代码是统一颜色，代码块也没有背景色，同时也没有高亮样式，接下来我们解决代码没有高亮问题。
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标签上
<template> <div v-html="htms" v-highlight></div> </template>
效果如下：
本文vue如何使用showdown并如何实现代码区域高亮的示例代码到此结束。坚强，不是应对悲伤不流一滴泪，而是擦干眼泪后微笑着应对以后的生活。小编再次感谢大家对我们的支持！
