前端/vue生态下，还有比 markdown-it 更好用的 markdown 组件吗？

Question

前端/vue生态下，还有比 markdown-it 更好用的 markdown 组件吗？

我的需求：我要给我的页面添加很多的「说明」，让使用者可以知道每个功能是干嘛的。这些「说明」可能嵌入到任何页面，也可能是一个专用页面，比如 FAQ 页面

我现在在一个 vue3 项目下使用 markdown-it 组件来实现上面的需求，但是有很多很多的问题

{  "name": "tracking-king",  "version": "0.1.0",  "private": true,  "scripts": {    "serve": "vue-cli-service serve",    "build": "vue-cli-service build",    "lint": "vue-cli-service lint"  },  "dependencies": {    "@ant-design/icons-vue": "^7.0.1",    "@quasar/quasar-ui-qmarkdown": "^2.0.0-beta.10",    "ant-design-vue": "^3.2.20",    "axios": "^1.4.0",    "core-js": "^3.8.3",    "echarts": "^5.4.2",    "element-plus": "^2.3.4",    "markdown-it": "^14.1.0",    "markdown-it-task-lists": "^2.1.1",    "quasar": "^2.15.1",    "sass": "^1.72.0",    "sass-loader": "^14.1.1",    "vue": "^3.2.13",    "vue-json-viewer": "^3.0.4",    "vue-request": "^2.0.4",    "vue-router": "^4.1.6"  },  "devDependencies": {    "@babel/core": "^7.12.16",    "@babel/eslint-parser": "^7.12.16",    "@vue/cli-plugin-babel": "~5.0.0",    "@vue/cli-plugin-eslint": "~5.0.0",    "@vue/cli-service": "~5.0.0",    "eslint": "^7.32.0",    "eslint-plugin-vue": "^8.0.3",    "less": "^4.1.3",    "less-loader": "^11.1.3"  },  "eslintConfig": {    "root": true,    "env": {      "node": true    },    "extends": [      "plugin:vue/vue3-essential",      "eslint:recommended"    ],    "parserOptions": {      "parser": "@babel/eslint-parser"    },    "rules": {      "vue/multi-word-component-names": 0,      "vue/no-unused-components": "off",      "no-unused-vars": "off"    }  },  "browserslist": [    "> 1%",    "last 2 versions",    "not dead",    "not ie 11"  ]}

我希望 markdown-it 可以渲染成和 github 的 markdown 风格差不多的样子，因为做美观。但是 markdown-it 却有自己的风格，而且对很多的 markdown 语法支持有问题，比如 > 引用就无法正确渲染

<template>    <div v-html="renderedMarkdown"></div></template><script setup>import MarkdownIt from 'markdown-it';const markdown = new MarkdownIt();const longMarkdownText = `# 标题这是一个长文本的Markdown。- 列表项 1- 列表项 2段落内容。[链接文字](https://example.com)![图片描述](https://example.com/image.jpg)> 这话一段引用另外一件有趣的事情是，SQLite 不接受任何外来的代码贡献。也就是说，SQLite 开源，但是并不开放代码贡献。在 SQLite 的版权声明有提到：`;const renderedMarkdown = markdown.render(longMarkdownText);</script>

不会渲染引用，而且会把我想多行留白的多个换行符变成了一个换行符，有点狗拿耗子

而且我希望可以渲染一个「目录」，类似思否的文章目录，怎么搞？

Answer 1

markdown-it 没看到你说的不支持 blockquote (>) 的问题啊？ �� markdown-it demo

感觉是不是因为缺失了样式的缘故？如果要改主题的话，可以自己使用CSS覆写样式呀。权重设置一下就好了。

---

题外话，“多行留白的多个换行符变成了一个换行符” 其实是 markdown 的问题，并没有空白行一说，不过你可以自己插入 <br> 来折行……

Answer 2

我之前使用过 nuxt 开发博客,有一个 @nuxt/content 的 module,有开箱即用的 markdown 支持

如果需要更灵活地处理 markdown,可以使用类似下面的代码

import { unified } from "unified";import remarkParse from "remark-parse";import remarkRehype from "remark-rehype";import rehypeStringify from "rehype-stringify";import rehypePrettyCode from "rehype-pretty-code"; async function main() {  const file = await unified()    .use(remarkParse)    .use(remarkRehype)    .use(rehypePrettyCode, {      // See Options section below.    })    .use(rehypeStringify)    .process("`const numbers = [1, 2, 3]{:js}`");   console.log(String(file));} main();

使用不同的插件就可以支持不同的功能,例如 rehype-pretty-code 这个插件可以设置输出的样式,其 theme 配置内置了一些主流样式 https://shiki.style/themes#themes

目录功能的话像 @nuxt/content 会有 API 直接提取文档的目录,否则需要自已写代码实现,实现也很简单,就是提取文档的 h1 等标签的内容。可以在构建时提取也可以在运行时提取。

多个换行符变一个换行符的问题,这不是组件的问题,markdown 最终是转化为 html 渲染的,html 基础渲染行为就是这样的,不能算是一个问题。

Answer 3

用vitePress开个项目，然后内嵌到你的项目里