当前位置：首页 > news >正文

使用Markdown-it插件实现在页面渲染markdown

news 2024/10/22 11:43:51

引言

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²	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'