Aller au contenu principal

Fonctionnalités Markdown

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

Front Matter​

Les documents Markdown ont des métadonnées au sommet appelées Front Matter :

mon-doc.md
---
id: mon-id-doc
title: Mon titre de document
description: Ma description de document
slug: /mon-url-personnalisee
---

## Titre Markdown

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

Liens​

Les liens Markdown classiques sont pris en charge, en utilisant des chemins URL ou des 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 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)

Logo Docusaurus

Vous pouvez également référencer des images par rapport au fichier actuel. C'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>Bonjour, Docusaurus !</h1>;
}
```
src/components/HelloDocusaurus.js
function HelloDocusaurus() {
  return <h1>Bonjour, Docusaurus !</h1>;
}

Admonitions​

Docusaurus a une syntaxe spéciale pour créer des avertissements et des encadrés :

:::tip[Mon conseil]

Utilisez cette option de fonctionnalité géniale

:::

:::danger[Attention]

Cette action est dangereuse

:::
Mon conseil

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 n'importe quel composant 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 le libellé ${children}`)
    }}>
    {children}
  </span>
);

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

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

Ceci est du vert Docusaurus !

Ceci est du bleu Facebook !