引入markdown解析器

一、解析器选择

这里准备引入markdown-it、markdown-it-vue、remarkable、marked、commonmark几个，然后看看那个渲染的效果好一些，如果可以，想做成可选功能，由用户去选择使用哪个解析器。

1）安装--save

npm install --registry=https://registry.npmmirror.com --loglevel verbose markdown-it --save
npm install --registry=https://registry.npmmirror.com --loglevel verbose markdown-it-vue --save
npm install --registry=https://registry.npmmirror.com --loglevel verbose remarkable --save
npm install --registry=https://registry.npmmirror.com --loglevel verbose marked --save
npm install --registry=https://registry.npmmirror.com --loglevel verbose commonmark --save

安装完毕之后，package.json的dependencies会增加如下项目：

1）安装--save-dev（建议）

npm install --registry=https://registry.npmmirror.com --loglevel verbose markdown-it --save-dev
npm install --registry=https://registry.npmmirror.com --loglevel verbose markdown-it-vue --save-dev
npm install --registry=https://registry.npmmirror.com --loglevel verbose remarkable --save-dev
npm install --registry=https://registry.npmmirror.com --loglevel verbose marked --save-dev
npm install --registry=https://registry.npmmirror.com --loglevel verbose commonmark --save-dev

安装完毕之后，package.json的devDependencies会增加如下项目：

二、markdown-it解析器

这里的解析器使用的是markdown-it，在MdPreview组件中进行渲染，从外部传入content内容。

MdPreview 参考

<template>
  <div v-html="renderedMarkdownContent"></div>
</template>
<script setup lang="ts">
import { ref, onMounted, defineProps, watchEffect } from 'vue'
import MarkdownIt from 'markdown-it'
const props = defineProps({
  code: {
    type: String,
    default: ''
  }
})
const renderedMarkdownContent = ref('')
const md = MarkdownIt()
// 组件挂载时，进行初始渲染
onMounted(() => {
  updateMarkdown()
})
// 监听 props.code 的变化，并在变化时更新 Markdown
watchEffect(() => {
  updateMarkdown()
})
// 定义一个函数来更新 Markdown 的渲染
function updateMarkdown() {
  renderedMarkdownContent.value = md.render(props.code)
}
</script>
<style scoped></style>

三、效果

解析器还不是很完善，可能需要加载一些其他的js，这个后续再慢慢研究，先把框架搞出来。