Abschlag

Ineinführung

Fumadocs bietet viele nützliche Erweiterungen für MDX, eine Auszeichnungssprache. Hier finden Sie eine kurze Einführung in die Standard-MDX-Syntax der Fumadocs-Benutzeroberfläche.

Abschlag

Wir verwenden GFM (GitHub Flavored Markdown), eine Obermenge von Markdown (CommonMark). Siehe GFM-Spezifikation.

# 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

![alt](/image.png)

| Table | Description |
| ----- | ----------- |
| Hello | World       |

Auto-Links

Interne Links verwenden die Komponente next/link, um Vorabruf zu ermöglichen und ein hartes Neuladen zu vermeiden.

Externe Links erhalten aus Sicherheitsgründen die Standardattribute rel="noreferrer noopener" target="_blank".

[My Link](https://github.github.com/gfm)

This also works: https://github.github.com/gfm.

MDX

MDX ist eine Obermenge von Markdown mit Unterstützung der JSX-Syntax. Sie können damit Komponenten importieren und direkt im Dokument verwenden oder sogar Werte exportieren.

import { Component } from './component';

<Component name="Hello" />

Weitere Informationen finden Sie unter MDX-Syntax.

Karten

Nützlich zum Hinzufügen von Links, es ist standardmäßig enthalten.

<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>

####-Symbol

Sie können Karten ein Symbol hinzufügen.

import { HomeIcon } from 'lucide-react';

<Cards>
  <Card icon={<HomeIcon />} href="/" title="Home">
    Go back to home
  </Card>
</Cards>

Ohne href

<Cards>
  <Card title="Fetching, Caching, and Revalidating">
    Learn more about `fetch` in Next.js.
  </Card>
</Cards>

Hinweise

Nützlich zum Hinzufügen von Tipps/Warnungen, standardmäßig enthalten.

<Callout>Hello World</Callout>

Titel

Geben Sie einen Callout-Titel an.

<Callout title="Title">Hello World</Callout>

Typen

Sie können die Art des Callouts festlegen.

• info (Standard)
• warn
• error

<Callout title="Title" type="error">
  Hello World
</Callout>

Komponenten anpassen

Siehe alle MDX-Komponenten und verfügbaren Optionen.

Überschriften

Auf jede Überschrift wird automatisch ein Anker angewendet, der ungültige Zeichen wie Leerzeichen bereinigt. (z. B. Hello World bis hello-world)

# Hello `World`

TOC-Einstellungen

Das Inhaltsverzeichnis (TOC) wird basierend auf Überschriften generiert. Sie können auch die Auswirkungen von Überschriften anpassen:

# 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 />

Benutzerdefinierter Anker

Sie können [#slug] hinzufügen, um Überschriftenanker anzupassen.

# heading [#my-heading-id]

Sie können es auch mit TOC-Einstellungen verketten wie:

# heading [toc] [#my-heading-id]

Um Personen mit einer bestimmten Überschrift zu verknüpfen, fügen Sie die Überschriften-ID zum Hash-Fragment hinzu: /page#my-heading-id.

Frontmatter

Wir unterstützen YAML frontmatter. Dies ist eine Möglichkeit, allgemeine Informationen des Dokuments anzugeben (z. B. Titel). Platzieren Sie es oben im Dokument.

---
title: Hello World
---

## Title

Eine Liste der für frontmatter verfügbaren Eigenschaften finden Sie unter Seitenkonventionen.

Codeblock

Syntaxhervorhebung wird standardmäßig mit Rehype Code.

```js
console.log('Hello World');
```

Sie können dem Codeblock einen Titel hinzufügen.

```js title="My Title"
console.log('Hello World');
```

Highlight-Linien

Sie können bestimmte Zeilen hervorheben, indem Sie [!code highlight] hinzufügen.

```tsx
<div>Hello World</div>  // [\!code highlight]
<div>Hello World</div>
<div>Goodbye</div>
<div>Hello World</div>
```

Wörter hervorheben

Sie können ein bestimmtes Wort hervorheben, indem Sie [!code word:<match>] hinzufügen.

```js
// [\!code word:config]
const config = {
  reactStrictMode: true,
};
```

Unterschiede

```ts
console.log('hewwo'); // [\!code --]
console.log('hello'); // [\!code ++]
```

console.log('hewwo'); 
console.log('hello'); 

Tab-Gruppen

Sie können Codeblöcke mit der Komponente <Tab /> verwenden.

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>

console.log('A');

console.log('B');

Verwenden von Typescript Twoslash

Schreiben Sie Typescript-Codeblöcke mit Hover-Typinformationen und erkannten Typfehlern.

Standardmäßig nicht aktiviert. Siehe Twoslash.

Bilder

Alle integrierten Inhaltsquellen verarbeiten Bilder ordnungsgemäß. Bilder werden automatisch für next/image optimiert.

![Image](/image.png)

Optional

Einige optionale Plugins können Sie aktivieren.

Mathe-Gleichungen

Schreiben Sie mathematische Gleichungen mit TeX.

```mdx
f(x) = x * e^{2 pi i \xi x}
```

f(x) = x * e^{2 pi i \xi x}

Informationen zum Aktivieren finden Sie unter Math Integration.

Paketinstallation

Generieren Sie Codeblöcke für die Installation von Paketen über Paketmanager (JS/Node.js).

```mdx
npm i next -D
```

npm i next -D

Informationen zum Aktivieren finden Sie unter Bemerkung Install.

Mehr

Sie können eine Liste der von Fumadocs unterstützten Plugins sehen.