如何在Monaco编辑器中获取Markdown预览？

Question

VSCode有针对.md Markdown文件的“打开预览”功能。如何获得相同的功能？它是否已包含在内？我查看了游乐场示例和API，但没有看到任何内容。谢谢。

- Chau Nguyen

Answer 1

这个功能不是 Monaco 的一部分。

我不会费心尝试将预览功能集成到 Monaco 中；只需从编辑器中获取 markdown 内容，通过 markdown 渲染引擎（如 markdown-it）进行处理，并在 iframe 或类似的元素中预览生成的 html。参见 markdown-it 演示 以获取灵感。

- Matt Bierner

---

会看一下。谢谢。有人知道在VSCode中如何完成吗？谢谢。 - Chau Nguyen

VS Code使用webview来显示由markdown-it生成的HTML内容（相关扩展源码：https://github.com/Microsoft/vscode/blob/master/extensions/markdown-language-features/src/features/preview.ts）。我是VSCode内置的Markdown扩展程序的开发者。 - Matt Bierner

Answer 2

在monaco-editor库的markdownRenderer.js中有一个renderMarkdown方法，该方法帮助将Markdown转换为HTML，然后可以在div的innerHTML中呈现。

import { renderMarkdown } from "monaco-editor/esm/vs/base/browser/markdownRenderer"

const htmlResult = renderMarkdown({
            value: samplemarkdownData
        }).innerHTML;

路径可能因不同的monaco-editor版本而异。这里以monaco-editor v0.27.0作为参考。

- Vimal Menon

---

这个操作是删除标记字符还是仅应用着色？ - Mike Lischke

请注意，此处使用的是 "marked" 库（源代码），而不是用于 "Markdown 语言功能" 的 "markdown-it"。 - Zhe

请注意，此处使用的是 "marked" 库（源代码），而不是用于 "Markdown 语言功能" 的 "markdown-it" 库。 - undefined