使用Markdown-it插件实现在页面渲染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 | 下标 | H | H2O |
| markdown-it-sup | 上标 | X2 | X2 |
| markdown-it-checkbox | 复选框 | 未选：- [ ] 选中：- [x] |
安装
pnpm i markdown-it插件安装,可以按需安装
pnpm i markdown-it-checkbox
pnpm i markdown-it-imsize
pnpm i markdown-it-expandable
pnpm i markdown-it-abbr
pnpm i markdown-it-anchor
pnpm i markdown-it-footnote
pnpm i markdown-it-highlightjs
pnpm i markdown-it-sub
pnpm i markdown-it-sup
pnpm i markdown-it-task-lists
pnpm i markdown-it-toc-done-right
使用
- 自定义组件 MarkdownRenderer
<template><div v-html="markdown.render(source)" />
</template><script setup>
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>- 在页面中引用
xml 代码解读复制代码<template><MarkdownRenderer :source="'# Hi!!'" />
</template><script setup>
import { reactive, ref } from "vue";
import MarkdownRenderer from "@/components/MarkdownRenderer.vue"</script>
<style lang="scss"></style>
打包报错
执行pnpm run build 出现如下异常
lua代码解读
复制代码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文件
sql 代码解读复制代码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'