如何像 VuePress 一样渲染 Markdown？

Question

问题

从文档中可以看出，VuePress 正在使用 markdown-it for rendering Markdown, which it has extended with these beautiful custom containers。

我想 "extract" 来自 VuePress 的 Markdown 渲染器（自定义容器和所有！），以便我们的浏览器内 Markdown 编辑器显示渲染 Markdown 的 VuePress 风格版本（减去侧边栏、搜索栏、等）。

因为它是开源的，所以它当然是可能的——但是浏览 VuePress 代码库并没有向我透露她的秘密，不幸的是没有 "VuePress plugin" 列出 here。

原因

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

用户可以从文档网站 "Edit this page!" 将他们带到静态服务器，在那里他们可以看到预览并拥有 Markdown 编辑器，并且可以点击按钮 "Save Changes"。所有未决的更改都被文件观察者捆绑到拉取请求中，它使用我们的 Gitbot 触发或更新针对 master docs 分支的现有 PR（它还具有通过审查和被检查的优势，同时避免将内部配置内容暴露给非技术文档贡献者）。

Answer 1

VuePress currently uses 以下 markdown-it 插件：

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

它的 style files (apparently in Stylus format) 可能也值得一看。