使用摊牌和突出显示代码区域的vue示例代码

前言：当我们想要把makedown文档翻译成html并显示在网页上，并且可以把我们想要的网页形式展现得很漂亮的时候，那么我就介绍插件来实现我们想要的功能。注：以下安装和使用方法基于vue。

1.安装摊牌

NPM安装摊牌-保存2，介绍摊牌进入页面使用

template div v-html=' htms '/div/templatescript import来自'摊牌' converter.setOption('tables '，true)的摊牌；//显示表导出默认值{data () {return {htms:''}}，created () {this.setmakedown ()}，methods : { setmakedown(){ this . htms=converter . make html('这是一个标题')}}

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

1.安装高亮显示

NPM安装高亮-保存2，在main.js中添加自定义说明

从' highlight.js '导入hljs '导入' highlight . js/styles/default . CSS '；//定义自定义指令高亮代码高亮vue.directive ('highlight '，function(El){ let blocks=El . queryselectorall(' precode ')；街区。foreach ((block)={hljs。highlightblock (block)})}) 3。在所用的div标签上添加“v-highlight”

模板div v-html=' html ms ' v-highlight/div/模板具有以下效果：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。