从这个系列的前几篇文章中，你可能已经猜到了，构建一个Markdown发布的Web应用最重要的是Markdown编辑器本身。
但并不是所有的编辑器都是平等的；有很多构建编辑器的方法，各有利弊。在本文中，我将尝试解释一下。 导致我当前解决方案的原因（尚未完成，但我可以说已经完成了80%）。
Markdown
如果你不知道什么是Markdown，可以将其视为一种类似HTML的文本，它是一种带有特殊字符或字符组合的文本，根据确定的规范进行解释和显示；例如，HTML的<h2>标签在Markdown中可以用##来表示，反之亦然。如果你想快速编写README、文档或者某些特定平台的文章，Markdown特别有用。你可以在这里 (opens new window)找到比我提供的更完整的介绍。
我需要构建一个带有实时预览的Markdown编辑器。第一部分并不难；在页面上放置一个文本区域，你就有了你的编辑器！问题在于实时预览；事实证明，Markdown在浏览器中不受原生支持...
[![Excuse Me Wow GIF by Masha]] 但是你知道什么是HTML！所以我只需要构建（或找到，就像在这种情况下）一个可以将Markdown转换为HTML的工具！
[
### 统一
为了构建Markdown编辑器（主要是预览部分），我决定使用unified (opens new window)，这是一个工具生态系统，允许开发者将一种格式解析为抽象树，并将其转换为另一种格式（例如，将markdown转换为html），并修改该树（例如，在将其转换为实际的html字符串之前，为特定的html元素添加特定的类）。关于如何做到这一点的基础知识可以在这篇文章 (opens new window)中找到，但主要包括：
- 读取Markdown内容（在这种情况下是从文本区域中读取）
- 使用
remarkParse将Markdown转换为语法树 * 使用remarkRehype将Markdown语法树转换为HTML语法树 - 使用
rehypeStringify将HTML语法树转换为HTML字符串
真正的魔力发生在生成语法树后；在那时，您可以使用现有的插件修改它们（或者如果您真的想要，可以制作自己的插件）。例如，我使用一个插件为某些元素添加特定的CSS类。 将以下的Markdown翻译为中文并删除第一级标题：这样它们与网站的视觉设计更好地结合，另一个是使用highlight.js (opens new window)添加代码高亮的功能，还有一些用于从Markdown文件的frontmatter生成js对象的功能和添加对Github风格Markdown的支持。我还可以做更多的事情，比如添加对视频、嵌入等的支持，但目前对于简单的预览来说已经足够了。
注意：remark和rehype也被astro (opens new window)用于渲染集合的Markdown内容，所以你在那里使用的任何插件也可以在这里使用。
将所有内容放在一起 #
现在我们已经基本了解了unified的工作原理，让我们来实践一下！我已经创建了一个stackblitz示例，你可以在下面的段落中看到：尝试在文本区域中写点什么，它应该会被解析并显示在旁边的预览中！