Aller au contenu principal

Fonctionnalités Markdown

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

Front Matter​

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

my-doc.md
---
id: my-doc-id
title: My document title
description: My document description
slug: /my-custom-url
---

## En-tête Markdown

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

Liens​

Les liens Markdown classiques sont pris en charge, à l'aide de chemins d'accès URL ou de chemins d'accès relatifs aux fichiers.

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 Markdown standard 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)

Logo Docusaurus

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

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

Blocs de code​

Les blocs de code Markdown sont pris en charge avec la coloration syntaxique.

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

Avertissements​

Docusaurus dispose d'une syntaxe spéciale pour créer des avertissements et des remarques :

:::tip[Mon conseil]

Utilisez cette fonctionnalité géniale

:::

:::danger[Attention]

Cette action est dangereuse

:::
Mon conseil

Utilisez cette fonctionnalité géniale

Attention

Cette action est dangereuse

MDX et composants React​

MDX peut rendre votre documentation plus interactive et permet d'utiliser n'importe quel composant React dans 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>
);

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

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

C'est le vert Docusaurus !

C'est le bleu Facebook !