让我们修复我们的Markdown内容。

通过 TinaMarkdown 解析内容

1. 更新 app/awesome-content.tsx 以添加以下内容：

import { TinaMarkdown } from "tinacms/dist/rich-text";

...

<h1>{amazingTitle}</h1>
<TinaMarkdown content={incredibleBody} />

测试一下。它有效！现在再次尝试编辑您的内容。看，一个富文本编辑器！

2. 继续为您的正文添加一些 样式。

为什么我们需要这样做？ 当我们向TinaCMS请求我们的Markdown内容时，它会给我们一个解析后的抽象语法树 (AST)。这看起来像一个包含我们的文本/格式/结构的JavaScript对象，每个都在自己的节点中。

Tina可以像上面那样使用 TinaMarkdown 为我们处理这个问题，或者我们可以自己逐步处理以获得更多的控制。🔧

TinaMarkdown 需要在客户端组件中调用，因为它需要访问React钩子。