Fonctionnalités Markdown

Docusaurus prend en charge Markdown et quelques fonctionnalités supplémentaires.

Front Matter

Les documents Markdown ont des métadonnées en haut appelées Front Matter :

mon-doc.md

---
id: mon-doc-id
title: Titre de mon document
description: Description de mon document
slug: /mon-url-personnalise
---

## Titre en Markdown

Texte en Markdown avec des [liens](./hello.md)

Liens

Les liens Markdown classiques sont pris en charge, en utilisant des chemins d'URL ou des chemins de fichiers relatifs.

Voyons comment [Créer une page](/create-a-page).

Voyons comment [Créer une page](./create-a-page.md).

Résultat : Voyons comment Créer une page.

Images

Les images en Markdown classiques sont prises en charge.

Vous pouvez utiliser des chemins absolus pour référencer des images dans le répertoire statique (static/img/docusaurus.png) :

![Logo Docusaurus](/img/docusaurus.png)

Vous pouvez également référencer des images relatives au fichier actuel. Cela est particulièrement utile pour placer les images à proximité des fichiers Markdown qui les utilisent :

![Logo Docusaurus](./img/docusaurus.png)

Blocs de code

Les blocs de code en Markdown sont pris en charge avec la mise en évidence de la syntaxe.

```jsx title="src/components/HelloDocusaurus.js"
function HelloDocusaurus() {
  return <h1>Hello, Docusaurus!</h1>;
}
```

src/components/HelloDocusaurus.js

function HelloDocusaurus() {
  return <h1>Hello, Docusaurus!</h1>;
}

Admonitions

Docusaurus dispose d'une syntaxe spéciale pour créer des admonitions et des encadrés d'alerte :

:::tip[Mon astuce]

Utilisez cette option de fonctionnalité géniale

:::

:::danger[Attention]

Cette action est dangereuse

:::

Mon astuce

Utilisez cette option de fonctionnalité géniale

Attention

Cette action est dangereuse

MDX et composants React

MDX peut rendre votre documentation plus interactive et permet d'utiliser des composants React à l'intérieur de Markdown :

export const Highlight = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: '20px',
      color: '#fff',
      padding: '10px',
      cursor: 'pointer',
    }}
    onClick={() => {
      alert(`Vous avez cliqué sur la couleur ${color} avec l'étiquette ${children}`)
    }}>
    {children}
  </span>
);

Voici <Highlight color="#25c2a0">le vert Docusaurus</Highlight> !

Voici <Highlight color="#1877F2">le bleu Facebook</Highlight> !

Voici le vert Docusaurus !

Voici le bleu Facebook !

.