vue3+ts+vite安装markdown编辑器

引言

Markdown-it 是一个 javascript markdown 解析器，导出一个函数，可以生成纯 HTML，人们可以随意使用。如 GitHub 页面所述，它还具有大量插件和功能。

用它制作一个Vue 组件非常容易，唯一的要求是在设置一些参数后安装和导入markdown-it函数并使用该render方法。

常用插件

名称	描述	语法	示例
markdown-it-abbr	注释	*[HTML]: 超文本标记语言	HTML
markdown-it-emoji	表情	:)	😃
markdown-it-footnote	脚注	参考文献[^1]	参考文献1
markdown-it-mark	突出显示	==标记==	标记
markdown-it-sub	下标	H2O	H2O
markdown-it-sup	上标	X^2^	X2
markdown-it-checkbox	复选框	未选：- [ ] 选中：- [x]

安装

npm i markdown-it

插件安装,可以按需安装
npm i markdown-it-checkbox
npm i markdown-it-imsize
npm i markdown-it-expandable


npm i markdown-it-abbr
npm i markdown-it-anchor
npm i markdown-it-footnote
npm i markdown-it-highlightjs
npm i markdown-it-sub
npm i markdown-it-sup
npm i markdown-it-task-lists
npm i markdown-it-toc-done-right

使用

• 自定义组件 MarkdownRenderer

<template>
  <div v-html="markdown.render(source)" />
</template>

<script setup lang="ts">
import MarkdownIt from "markdown-it";
import MarkdownItAbbr from "markdown-it-abbr";
import MarkdownItAnchor from "markdown-it-anchor";
import MarkdownItFootnote from "markdown-it-footnote";
import MarkdownItHighlightjs from "markdown-it-highlightjs";
import MarkdownItSub from "markdown-it-sub";
import MarkdownItSup from "markdown-it-sup";
import MarkdownItTasklists from "markdown-it-task-lists";
import MarkdownItTOC from "markdown-it-toc-done-right";

const markdown = new MarkdownIt()
  .use(MarkdownItAbbr)
  .use(MarkdownItAnchor)
  .use(MarkdownItFootnote)
  .use(MarkdownItHighlightjs)
  .use(MarkdownItSub)
  .use(MarkdownItSup)
  .use(MarkdownItTasklists)
  .use(MarkdownItTOC);

defineProps({
  source: {
    type: String,
    default: ""
  }
});
</script>

• 在页面中引用

<template>
    <MarkdownRenderer :source="'# Hi!!'" />
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import MarkdownRenderer from "@/components/MarkdownRenderer.vue"


</script>

<style lang="less">

</style>

打包报错

执行npm run build 出现如下异常

src/components/MarkdownRenderer.vue:9:32 - error TS7016: Could not find a declaration file for module 'markdown-it-footnote'. '/Users/markxrrl/workspace-product/code/flowable-vue3/node_modules/markdown-it-footnote/index.js' implicitly has an 'any' type.

出错原因
原因是： ‘vue-xxx’文件可能不是.ts文件而是.js文件

解决方法：
在目录src中创建shims-vue.d.ts文件

declare module 'markdown-it-anchor'
declare module 'markdown-it-abbr'
declare module 'markdown-it-footnote'
declare module 'markdown-it-sub'
declare module 'markdown-it-sup'
declare module 'markdown-it-task-lists'