AI 매직 3DDocs가격 인하
문서 작성 방법
소개
Fumadocs는 마크업 언어인 MDX에 대한 많은 유용한 확장을 제공합니다. 다음은 Fumadocs UI의 기본 MDX 구문에 대한 간략한 소개입니다.
MDX는 Fumadocs의 유일한 지원 형식이 아닙니다. 실제로 next-mdx-remote 또는 CMS와 같은 렌더러를 사용할 수 있습니다.
마크다운
우리는 Markdown(CommonMark)의 상위 집합인 GFM(GitHub Flavored Markdown)을 사용합니다. GFM 사양을 참조하세요.
# Heading
## Heading
### Heading
#### Heading
Hello World, **Bold**, _Italic_, ~~Hidden~~
```js
console.log('Hello World');
```
1. First
2. Second
3. Third
- Item 1
- Item 2
> Quote here
| Table | Description |
| ----- | ----------- |
| Hello | World |자동 링크
내부 링크는 next/link 구성 요소를 사용하여 프리페치를 허용하고 하드 다시 로드를 방지합니다.
외부 링크는 보안을 위해 기본 rel="noreferrer noopener" target="_blank" 속성을 가져옵니다.
[My Link](https://github.github.com/gfm)
This also works: https://github.github.com/gfm.MDX
MDX는 JSX 구문을 지원하는 Markdown의 상위 집합입니다. 이를 통해 구성 요소를 가져와서 문서에서 바로 사용하거나 값을 내보낼 수도 있습니다.
import { Component } from './component';
<Component name="Hello" />자세한 내용은 MDX 구문을 참조하세요.
카드
링크를 추가하는 데 유용하며 기본적으로 포함되어 있습니다.
<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>
</Cards>아이콘
카드에 아이콘을 지정할 수 있습니다.
import { HomeIcon } from 'lucide-react';
<Cards>
<Card icon={<HomeIcon />} href="/" title="Home">
Go back to home
</Card>
</Cards>href 없음
<Cards>
<Card title="Fetching, Caching, and Revalidating">
Learn more about `fetch` in Next.js.
</Card>
</Cards>Fetching, Caching, and Revalidating
Learn more about fetch in Next.js.
콜아웃
팁/경고를 추가하는 데 유용하며 기본적으로 포함되어 있습니다.
<Callout>Hello World</Callout>제목
콜아웃 제목을 지정합니다.
<Callout title="Title">Hello World</Callout>Title
유형
콜아웃 유형을 지정할 수 있습니다.
info(기본값)warnerror
<Callout title="Title" type="error">
Hello World
</Callout>Title
Hello World
구성 요소 사용자 정의
모든 MDX 구성 요소 및 사용 가능한 옵션를 참조하세요.
제목
앵커는 각 제목에 자동으로 적용되어 공백과 같은 유효하지 않은 문자를 삭제합니다. (예: Hello World ~ hello-world)
# Hello `World`TOC 설정
목차(TOC)는 제목을 기반으로 생성되며, 제목 효과를 사용자 정의할 수도 있습니다.
# 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 />커스텀 앵커
[#slug]를 추가하여 제목 앵커를 사용자 정의할 수 있습니다.
# heading [#my-heading-id]다음과 같은 TOC 설정으로 연결할 수도 있습니다.
# heading [toc] [#my-heading-id]사람들을 특정 제목에 연결하려면 해시 조각에 제목 ID(/page#my-heading-id)를 추가하세요.
머리말
우리는 YAML 머리말을 지원합니다. 문서의 공통 정보(예: 제목)를 지정하는 방법입니다. 문서 상단에 배치하세요.
---
title: Hello World
---
## Title머리말에 사용할 수 있는 속성 목록은 페이지 규칙]을 참조하세요.
코드블록
구문 강조 표시는 Rehype Code를 사용하여 기본적으로 지원됩니다.
```js
console.log('Hello World');
```코드블록에 제목을 추가할 수 있습니다.
```js title="My Title"
console.log('Hello World');
```하이라이트 라인
[!code highlight]를 추가하여 특정 줄을 강조 표시할 수 있습니다.
```tsx
<div>Hello World</div> // [\!code highlight]
<div>Hello World</div>
<div>Goodbye</div>
<div>Hello World</div>
```단어 강조 표시
[!code word:<match>]를 추가하여 특정 단어를 강조 표시할 수 있습니다.
```js
// [\!code word:config]
const config = {
reactStrictMode: true,
};
```차이점
```ts
console.log('hewwo'); // [\!code --]
console.log('hello'); // [\!code ++]
```console.log('hewwo');
console.log('hello'); Tab 그룹
<Tab /> 구성 요소와 함께 코드 블록을 사용할 수 있습니다.
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
<Tabs items={['Tab 1', 'Tab 2']}>
<Tab value='Tab 1'>
```ts
console.log('A');
```
</Tab>
<Tab value='Tab 2'>
```ts
console.log('B');
```
</Tab>
</Tabs>MDX 구성 요소를 MDX 파일로 가져오는 대신 추가할 수 있습니다.
console.log('A');console.log('B');Typescript Twoslash 사용
호버 유형 정보 및 감지된 유형 오류가 포함된 Typescript 코드 블록을 작성합니다.
기본적으로 활성화되어 있지 않습니다. 두슬래시.
이미지
모든 내장 콘텐츠 소스는 이미지를 올바르게 처리합니다.
이미지는 next/image에 자동으로 최적화됩니다.
선택 사항
활성화할 수 있는 일부 선택적 플러그인.
수학 방정식
TeX으로 수학 방정식을 작성해 보세요.
```mdx
f(x) = x * e^{2 pi i \xi x}
```f(x) = x * e^{2 pi i \xi x}활성화하려면 Math Integration.
패키지 설치
패키지 관리자(JS/Node.js)를 통해 패키지 설치를 위한 코드 블록을 생성합니다.
```mdx
npm i next -D
```npm i next -D활성화하려면 Remark Install.
더
Fumadocs에서 지원하는 플러그인 목록](/docs/headless/mdx)를 보실 수 있습니다.