vue项目中展示markdown文件（markdown-it-vue）

//安装依赖
npm i markdown-it-vue

//引入markdown-ite-vue
import MarkdownItVue from "markdown-it-vue";
import "markdown-it-vue/dist/markdown-it-vue.css";

//注册组件
 components: {
        MarkdownItVue
},

//使用组件
<markdown-it-vue class="md-body" :content="htmlMD" />

//将.md文件转化为markdown-it-vue可以解析的字符串
loadMarkdown()方法

//完整代码
<template>
  <div class="md-content">
    <markdown-it-vue class="md-body" :content="htmlMD" />
  </div>
</template>
<script>
import MarkdownItVue from "markdown-it-vue";
import "markdown-it-vue/dist/markdown-it-vue.css";
export default {
    components: {
        MarkdownItVue
    },
    data(){
      return{
        htmlMD: "",
      }
    },
    methods:{
    loadMarkdown() {
		    // 假设您有一个本地markdown文件路径
		    const markdownPath = '/static/test.md'
            //通过fetch请求将.md文件转化为markdown-it-vue可以解析的字符串
		    fetch(markdownPath)
			    .then(response => response.text())
			    .then(markdown => {
                    //实验highlight未生效
				    // const md = new MarkdownIt({
					//     html: true,
					//     linkify: true,
					//     typographer: true,
					//     highlight: function (str, lang) {
					// 	    if (lang && hljs.getLanguage(lang)) {
					// 		    try {
					// 			    return hljs.highlight(lang, str).value;
					// 		    } catch (e) { }
					// 	    }
					//
					// 	    return ''; // use external default escaping
					//     }
				    // });
				    // this.markdownContent = md.render(markdown);
                    
                    //此处的markdown即为字符串
				    this.htmlMD = markdown
			    })
			    .catch(error => {
				    console.error('Error loading markdown:', error);
			    });
	    }
    }，
    created(){
      this.loadMarkdown()
    }
}
</script>