渲染Markdown内容

当通过Tina的API请求你的Markdown内容时，Tina会提供一个*解析后的AST（抽象语法树）*版本的内容。

解析后的AST使开发者能够逐步遍历每个节点，并完全控制地渲染它。

下面的例子展示了一些示例Markdown及其相关的AST。

内置Markdown渲染

Tina还提供了一个<TinaMarkdown>组件，它可以从解析后的AST渲染你的md或mdx组件，而无需自己处理数据结构。

只需通过content属性传入Markdown内容即可。

样式化Markdown元素

<TinaMarkdown>组件接受一个components字段，该字段将HTML元素属性映射到React组件。

当一个元素出现在AST树中时，它将被拦截并替换为映射中的React组件。

MDX和自定义元素

如果你使用mdx作为格式，你将能够定义编辑者可以利用的自定义组件。

MDX如何与Tina一起工作？

Tina不需要像其他MDX工具那样的编译步骤，所以它需要提前知道你支持的所有可能元素。

而不是在MDX中使用import语句，你需要在Tina的schema中将每个元素注册为一个template。

富文本模板

这仅适用于mdx格式的文档。

在定义集合时，Tina还需要提前定义每个MDX组件。

通过定义上述NewsletterSignup模板，我们的编辑者现在可以将该模板添加到页面主体中。

富文本字段还获得了一个新的“嵌入”选项，用于添加这些组件。

链接到React组件

一旦你在集合中用富文本字段注册了一个template，Tina仍然需要知道如何渲染自定义组件。将键和值添加到传递给<TinaMarkdown>的components属性的映射中。

键应与模板的name属性匹配。

一旦我们的自定义组件已在TinaMarkdown中注册，编辑者可以轻松添加组件，并立即在页面上看到它们的渲染效果。