Réduction

##Présentation

Fumadocs fournit de nombreuses extensions utiles à MDX, un langage de balisage. Voici une brève introduction à la syntaxe MDX par défaut de l'interface utilisateur de Fumadocs.

Démarquage

Nous utilisons GFM (GitHub Flavored Markdown), un surensemble de Markdown (CommonMark). Voir Spécification 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

![alt](/image.png)

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

Liens automatiques

Les liens internes utilisent le composant next/link pour permettre la prélecture et éviter le rechargement brutal.

Les liens externes obtiendront les attributs rel="noreferrer noopener" target="_blank" par défaut pour des raisons de sécurité.

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

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

MDX

MDX est un sur-ensemble de Markdown, avec prise en charge de la syntaxe JSX. Il vous permet d'importer des composants et de les utiliser directement dans le document, voire d'exporter des valeurs.

import { Component } from './component';

<Component name="Hello" />

voir Syntaxe MDX pour en savoir plus.

Cartes

Utile pour ajouter des liens, il est inclus par défaut.

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

Icône ####

Vous pouvez spécifier une icône pour les cartes.

import { HomeIcon } from 'lucide-react';

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

Sans href

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

légendes

Utile pour ajouter des conseils/avertissements, il est inclus par défaut.

<Callout>Hello World</Callout>

Titre

Spécifiez un titre de légende.

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

####Type

Vous pouvez spécifier le type de légende.

• info (par défaut)
• warn
• error

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

Personnaliser les composants

Voir tous les composants MDX et les options disponibles.

Titres

Une ancre est automatiquement appliquée à chaque titre, elle nettoie les caractères invalides comme les espaces. (par exemple, Hello World à hello-world)

# Hello `World`

Paramètres ### TOC

La table des matières (TOC) sera générée en fonction des titres, vous pouvez également personnaliser les effets des titres :

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

Ancre personnalisée

Vous pouvez ajouter [#slug] pour personnaliser les ancres de titre.

# heading [#my-heading-id]

Vous pouvez également l'enchaîner avec des paramètres TOC tels que :

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

Pour lier des personnes à un titre spécifique, ajoutez l'identifiant du titre au fragment de hachage : /page#my-heading-id.

Avant-propos

Nous prenons en charge le contenu YAML. C'est un moyen de spécifier les informations communes du document (par exemple le titre). Placez-le en haut du document.

---
title: Hello World
---

## Title

Voir Page Conventions pour une liste des propriétés disponibles pour le frontmatter.

Bloc de code

La mise en évidence de la syntaxe est prise en charge par défaut à l'aide de Rehype Code.

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

Vous pouvez ajouter un titre au bloc de code.

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

Lignes de surbrillance

Vous pouvez mettre en évidence des lignes spécifiques en ajoutant [!code highlight].

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

Mettre en surbrillance les mots

Vous pouvez mettre en évidence un mot spécifique en ajoutant [!code word:<match>].

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

Différences

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

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

Groupes d'onglets ### T

Vous pouvez utiliser des blocs de code avec le composant <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>

console.log('A');

console.log('B');

Utilisation de Typescript Twoslash

Écrivez des blocs de code Typescript avec des informations sur le type de survol et les erreurs de types détectées.

Non activé par défaut. Voir Twoslash.

Images

Toutes les sources de contenu intégrées gèrent correctement les images. Les images sont automatiquement optimisées pour next/image.

![Image](/image.png)

En option

Certains plugins facultatifs que vous pouvez activer.

Méquations mathématiques

Écrivez des équations mathématiques avec TeX.

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

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

Pour l'activer, voir Math Integration.

Installation du package

Générez des blocs de code pour installer des packages via les gestionnaires de packages (JS/Node.js).

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

npm i next -D

Pour l'activer, voir Remarque Install.

Plus

Vous pouvez voir une liste des plugins pris en charge par Fumadocs.