Fumadocs
Markdown
Giới thiệu
Fumadocs cung cấp nhiều tiện ích mở rộng hữu ích cho MDX, ngôn ngữ đánh dấu. Dưới đây là phần giới thiệu ngắn gọn về cú pháp MDX mặc định của Fumadocs.
MDX
Chúng tôi khuyên bạn nên sử dụng MDX, một superset của Markdown với cú pháp JSX. Nó cho phép bạn nhập các thành phần và sử dụng chúng trong tài liệu hoặc thậm chí viết javascript.
Card
import { HomeIcon } from 'lucide-react';
<Cards>
<Card
href="https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating"
title="Fetching, Caching, and Revalidating"
>
Learn more about caching in Next.js
</Card>
<Card title="href is optional">Learn more about `fetch` in Next.js.</Card>
<Card icon={<HomeIcon />} href="/" title="Home">
You can include icons too.
</Card>
</Cards>Fetching, Caching, and Revalidating
Learn more about caching in Next.js
href is optional
Learn more about
fetch in Next.js.Home
You can include icons too.
Đọc Thêm
import { getPageTreePeers } from 'fumadocs-core/server';
import { source } from '@/lib/source';
<Cards>
{getPageTreePeers(source.pageTree, '/docs/my-page').map((peer) => (
<Card key={peer.url} title={peer.name} href={peer.url}>
{peer.description}
</Card>
))}
</Cards>;Callout (Chú thích)
Hữu ích để thêm các mẹo/cảnh báo, nó được bao gồm theo mặc định. Bạn có thể chỉ định loại chú thích:
infomặc địnhwarncảnh báoerrorlỗisuccess
<Callout>Hello World</Callout>
<Callout title="Title">Hello World</Callout>
<Callout title="Title" type="error">
Hello World
</Callout>Hello World
Title
Hello World
Title
Hello World
Tip
Hello World
Cảnh báo
Hello World
Tiêu đề
# h1
## h2
### h3
#### h4
##### h5
###### h6Bảng mục lục
# Heading [!toc]
This heading will be hidden from TOC.
# Another Heading [toc]
This heading will **only** be visible in TOC, you can use it to add additional TOC items.
Like headings rendered in a React component:
<MyComp />Code Block
Đưa code vào giữa cặp ```
console.log('Hello World');Đưa code vào giữa ```js title="My title" và ```
console.log('Hello World');Hiện số dòng code
Cho số dòng vào ```ts lineNumbers=4
function main() {
console.log('starts from 4');
return 0;
}Highligh code
const a = 'Hello World';
// ^?
console.log(a); Tab Groups
Đưa code vào giữa ```ts tab="Tên tab 1" và ```
console.log('A');Mermaid
pnpm add mermaid next-themesTạo component sau:
'use client';
import { use, useEffect, useId, useState } from 'react';
import { useTheme } from 'next-themes';
export function Mermaid({ chart }: { chart: string }) {
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) return;
return <MermaidContent chart={chart} />;
}
const cache = new Map<string, Promise<unknown>>();
function cachePromise<T>(
key: string,
setPromise: () => Promise<T>,
): Promise<T> {
const cached = cache.get(key);
if (cached) return cached as Promise<T>;
const promise = setPromise();
cache.set(key, promise);
return promise;
}
function MermaidContent({ chart }: { chart: string }) {
const id = useId();
const { resolvedTheme } = useTheme();
const { default: mermaid } = use(
cachePromise('mermaid', () => import('mermaid')),
);
mermaid.initialize({
startOnLoad: false,
securityLevel: 'loose',
fontFamily: 'inherit',
themeCSS: 'margin: 1.5rem auto 0;',
theme: resolvedTheme === 'dark' ? 'dark' : 'default',
});
const { svg, bindFunctions } = use(
cachePromise(`${chart}-${resolvedTheme}`, () => {
return mermaid.render(id, chart.replaceAll('\\n', '\n'));
}),
);
return (
<div
ref={(container) => {
if (container) bindFunctions?.(container);
}}
dangerouslySetInnerHTML={{ __html: svg }}
/>
);
}và tạo component
import defaultMdxComponents from 'fumadocs-ui/mdx';
import { Mermaid } from '@/components/mdx/mermaid';
import type { MDXComponents } from 'mdx/types';
export function getMDXComponents(components?: MDXComponents): MDXComponents {
return {
...defaultMdxComponents,
Mermaid,
...components,
};
}Ví dụ:
<Mermaid
chart="
graph TD;
subgraph AA [Consumers]
A[Mobile app];
B[Web app];
C[Node.js client];
end
subgraph BB [Services]
E[REST API];
F[GraphQL API];
G[SOAP API];
end
Z[GraphQL API];
A --> Z;
B --> Z;
C --> Z;
Z --> E;
Z --> F;
Z --> G;"
/>