官网:插件演示官网
安装
npm install markdown-it-vue
使用
<template>
<div>
<markdown-it-vue class="md-body" :content="content" />
</div>
</template>
<script>
import MarkdownItVue from 'markdown-it-vue'
import 'markdown-it-vue/dist/markdown-it-vue.css'
export default {
components: {
MarkdownItVue
},
data() {
return {
content: '# your markdown content'
}
}
}
</script>
部分问题
我这边遇到一个input不为String问题,解决方法是定义一个变量,然后赋值给这个变量,用这个赋值过的变量来做:content
//部分代码省略
<markdown-it-vue
class="md-body"
v-highlight
:content="html"
:options="options"
/>
data() {
return {
html:"",
options: {
markdownIt: {
linkify: true
}
}
};
},
this.html = this.article.html
效果
效果与我之前的差别不是很大,但是在手机端的代码显示效果很不错!