问题

Document.tsx

import React from "react";
import Markdoc from "@markdoc/markdoc";

const config = {};

interface DocumentProps {
	source: string;
}

export function Document({ source }: DocumentProps) {
	const ast = Markdoc.parse(source);
	const content = Markdoc.transform(ast, config);

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

export default Document;

Home.tsx

import { Document } from "@containers";

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

export default Home;

I wanna see markdown but it's being rendered as normal text # Hello world. > My first Markdoc page.

There were some tutorials and guides for Next.js + Markdoc app, but they all didn't work for my app.

<details>
<summary>英文:</summary>

Document.tsx

import React from "react";
import Markdoc from "@markdoc/markdoc";

const config = {};

interface DocumentProps {
source: string;
}

export function Document({ source }: DocumentProps) {
const ast = Markdoc.parse(source);
const content = Markdoc.transform(ast, config);

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

}

export default Document;

Home.tsx

import { Document } from "@containers";

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

export default Home;

I wanna see markdown but it's being rendered as a normal text `# Hello world. > My first Markdoc page`.

There were some tutorials and guides for Next.js + Markdoc app, but they all didn't work for my app.

</details>


# 答案1
**得分**: 0

Markdown对缩进很敏感，你的`source`部分缩进不正确。推荐使用空行分隔标题、段落引用等。

```javascript
{ Document } from &quot;@containers&quot;;

export function Home() {
  return (
    &lt;div&gt;
      &lt;Document
        source={`# 你好，世界。

&gt; 我的第一个Markdoc页面`}
      /&gt;
    &lt;/div&gt;
  );
}

export default Home;

import { Document } from "@containers";

export function Home() {
  return (
    <div>
      <Document
        source={`# Hello world.

> My first Markdoc page`}
      />
    </div>
  );
}

export default Home;