React+TypeScript+Vite项目中Markdoc无法渲染Markdown的问题求助

问题原因 #

你的代码核心问题是传入的Markdown字符串包含大量前导缩进，Markdoc会将缩进超过4个空格的内容识别为代码块，导致原本的标题、引用语法被当作普通文本解析。

解决方案 #

1. 清理输入字符串的多余缩进

你可以通过两种方式处理：

方式一：直接调整模板字符串写法

去掉source模板字符串中每一行的多余前导空格，确保Markdown语法符号（#、>）处于行首：

// Home.tsx
import { Document } from "@containers";

export function Home() {
    return (
        <div>
            <Document
                source={`# Hello world.
> My first Markdoc page`}
            />
        </div>
    );
}

export default Home;

方式二：在Document组件中自动清理

如果需要保留模板字符串的缩进格式，可以在解析前对输入文本进行预处理，去除行首多余空格并修剪首尾空白：

// Document.tsx
import React from "react";
import Markdoc from "@markdoc/markdoc";

const config = {};

interface DocumentProps {
    source: string;
}

export function Document({ source }: DocumentProps) {
    // 修剪首尾空白，同时移除每一行的前导空格
    const cleanedSource = source.trim().replace(/^\s+/gm, '');
    const ast = Markdoc.parse(cleanedSource);
    const content = Markdoc.transform(ast, config);

    return Markdoc.renderers.react(content, React);
}

export default Document;

2. 验证Markdoc版本

确保安装了最新稳定版的Markdoc，避免版本兼容问题：

npm install @markdoc/markdoc@latest

3. 可选：显式配置基础标签（增强稳定性）

虽然空配置支持基础语法，但显式声明标签映射可以避免潜在的解析异常：

// Document.tsx 中的config修改为
const config = {
  tags: {
    h1: { render: 'h1' },
    blockquote: { render: 'blockquote' },
    // 可根据需要添加更多基础标签（h2-h6、p、strong等）
  },
};

测试验证 #

修改后重新启动Vite开发服务器，原本的Markdown语法会被正确渲染为<h1>和<blockquote>元素，显示为富文本效果。

内容的提问来源于stack exchange，提问作者tedchow