分享一个用于Vue的markdown插件

# 安装

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 部分问题

我这边遇到一个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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 效果

效果与我之前的差别不是很大，但是在手机端的代码显示效果很不错！

编辑

#Vue

上次更新: 2022/08/29, 16:40:19

← 使用has属性构造必填效果 Vue分享QQ却只能访问首页的解决方法→