如何使用 Astro 中的 Remark 来使我用 Markdown 编写的帖子保留样式？

Question

我有一个用 Astro 写的博客，我用 Markdown 写帖子。 当我渲染帖子时，我在使用 remark 和 remark-html 传递我的 md 标签（例如 ##）时遇到问题。

async function remarkContent(content) {
    const file = await remark()
        .use(remarkHtml)
        .process(content);
    return content;
}

我尝试过这个功能，然后将其传递给 Html 片段，但它不起作用

Answer 1

Astro 内置支持 Markdown 文件和备注，因此，如果您的内容位于项目文件夹中，您可以将 Markdown 文件放在

src/pages/

中并让它们自动转换为页面或将文件放置在其他地方，

 src/content/

例如，导入它们进行渲染。

如果您的内容是远程存储的并且您正在获取它，您可能仍然需要执行示例函数之类的操作。

我认为您的示例代码的主要问题是它返回

content

。它应该返回 transformed 文件：

async function remarkContent(content) {
    const file = await remark()
        .use(remarkHtml)
        .process(content);
    return String(file);
}

然后您可以使用 the

set:html

指令:

在 Astro 评论中使用它

<Fragment set:html={remarkContent(mdString)} />