如何像 VuePress 一样渲染 Markdown？

Posted 2023-02-22

【中文标题】如何像 VuePress 一样渲染 Markdown？

【英文标题】：How to render Markdown the same way VuePress does?

【发布时间】：2018-12-23 05:59:27

【问题描述】：

问题

从文档中，很明显 VuePress 使用 markdown-it 来呈现 Markdown，并使用这些 beautiful custom containers 进行了扩展。

我想从 VuePress（自定义容器和所有！）中“提取” Markdown 渲染器，以便我们的浏览器内 Markdown 编辑器显示渲染 Markdown 的 VuePress 式版本（减去侧边栏、搜索栏等）。

因为它是开源的，所以这当然是可能的 - 但在 VuePress 代码库中翻找并没有向我透露她的秘密，不幸的是没有列出“VuePress 插件”here。

为什么

为了鼓励人们为我们的文档做出贡献，也是使用 VuePress 构建的，我正在构建一个简单的静态服务器，它从我们的主文档分支获取最新的 Markdown 文件，并在一个包含以下内容的文本框中并排显示它们左侧的所有 Markdown 和右侧的渲染版本。

从文档网站，用户可以“编辑此页面！”这会将他们带到静态服务器，在那里他们可以看到预览并拥有 Markdown 编辑器，并且可以点击“保存更改”按钮。所有待处理的更改都被一个文件观察器捆绑到一个拉取请求中，它使用我们的 Gitbot 触发或更新针对主文档分支的现有 PR（它还具有通过审查和被检查的优势，同时避免将内部配置内容暴露给非技术文档贡献者）。

【参考方案1】：

VuePress currently uses 以下 markdown-it 插件：

markdown-it-anchor markdown-it-container（这似乎是你最感兴趣的） markdown-it-emoji markdown-it-table-of-contents

它的style files（显然在Stylus format）可能也值得一看。