vue-markdown安装及配置

Vue-Markdown是一个用于Vue.js环境中的Markdown解析库，它允许你在Vue组件中方便地渲染Markdown文本。以下是安装和基本配置步骤：

1. 安装：
使用npm或yarn安装`vue-markdown-it`，因为Vue-Markdown依赖于`markdown-it`库作为核心渲染引擎：
- npm:

     npm install vue-markdown-it markdown-it-container markdown-it-anchor

或者
- yarn:

     yarn add vue-markdown-it markdown-it-container markdown-it-anchor

2. 引入并注册插件：
在你的Vue项目中，通常会通过Vue.extend()创建一个自定义组件，然后在这个组件的原型上添加`Markdown`属性：

   import Vue from 'vue';
   import MarkdownIt from 'vue-markdown-it';

   const app = new Vue({
       components: {
           MyMarkdownComponent: {
               extends: Vue.component('div'),
               props: ['markdown'],
               template: `
                   <div>
                     {{ parsedMarkdown }}
                   </div>
               `,
               computed: {
                   parsedMarkdown() {
                       return MarkdownIt().use(markedContainer).use(markedAnchor).render(this.markdown);
                   }
               },
           },
       },
   });

这里`markedContainer`和`markedAnchor`是MarkdownIt的插件，可以根据需要选择是否启用。

3. 配置：
如果你需要自定义Markdown解析的行为，可以传递额外的选项给`MarkdownIt`构造函数，例如设置主题、链接转义等：

   computed: {
       parsedMarkdown() {
           const md = MarkdownIt({
               html: true, // 允许HTML标签，默认为true
               linkify: true, // 自动识别URL并转换为链接，默认为true
           }).use(markedContainer).use(markedAnchor);

           return md.render(this.markdown);
       },
   },

4. 使用组件：
现在你可以将`MyMarkdownComponent`添加到你的模板中，传入Markdown字符串：

   <my-markdown-component :markdown="yourMarkdownContent"></my-markdown-component>