Aller au contenu principal
Version : 2.0.0-beta.16 🚧

Admonitions

En plus de la syntaxe Markdown de base, nous utilisons remarqu-admonitions aux côtés de MDX pour ajouter la prise en charge des admonitions. Les admonitions sont précédées d'un série de trois deux-points.

Exemple :

:::note remarque

Un peu de **contenu** avec la `syntaxe` _markdown_. Consultez [cette `api`](#).

:::

:::tip astuce

Un peu de **contenu** avec la `syntaxe` _markdown_. Consultez [cette `api`](#).

:::

:::info

Un peu de **contenu** avec la `syntaxe` _markdown_. Consultez [cette `api`](#).

:::

:::caution attention

Un peu de **contenu** avec la `syntaxe` _markdown_. Consultez [cette `api`](#).

:::

:::danger

Un peu de **contenu** avec la `syntaxe` _markdown_. Consultez [cette `api`](#).

:::
http://localhost:3000
remarque

Un peu de contenu avec la syntaxe markdown. Consultez cette api.

astuce

Un peu de contenu avec la syntaxe markdown. Consultez cette api.

info

Un peu de contenu avec la syntaxe markdown. Consultez cette api.

attention

Un peu de contenu avec la syntaxe markdown. Consultez cette api.

danger

Un peu de contenu avec la syntaxe markdown. Consultez cette api.

Utilisation avec Prettier

Si vous utilisez Prettier pour formater vos fichiers Markdown, Prettier risque d'auto-formater votre code en syntaxe d'admonition invalide. Pour éviter ce problème, ajoutez des lignes vides autour des directives de début et de fin. C'est également la raison pour laquelle les exemples que nous présentons ici comportent tous des lignes vides autour du contenu.

<!-- Prettier ne change pas ceci -->
::: note

Hello world

:::

<!-- Prettier change ceci -->
::: note
Hello world
:::

<!-- en cela -->
::: note Hello world:::

Spécifier un titre

Vous pouvez également spécifier un titre facultatif

:::note Votre titre

Un peu de **contenu** avec la `syntax` _markdown_.

:::
http://localhost:3000
Votre titre

Un peu de contenu avec la syntax markdown.

Admonitions avec MDX

Vous pouvez également utiliser MDX dans les admonitions !

import Tabs from '@theme/Tabs';

import TabItem from '@theme/TabItem';

:::tip Utiliser les onglets dans les admonitions

<Tabs>
<TabItem value="apple" label="Apple">Ceci est une pomme 🍎</TabItem>
<TabItem value="orange" label="Orange">Ceci est une orange 🍊</TabItem>
<TabItem value="banana" label="Banana">Ceci est une banane 🍌</TabItem>
</Tabs>

:::
http://localhost:3000
Utilisez les onglets dans les admonitions
Voici une pomme 🍎

Utilisation dans JSX

En dehors de Markdown, vous pouvez utiliser le composant @theme/Admonition pour obtenir le même résultat.

MyReactPage.jsx
import Admonition from '@theme/Admonition';

export default function MyReactPage() {
return (
<div>
<Admonition type="info">
<p>Quelques informations</p>
</Admonition>
</div>
);
}

Les types qui sont acceptés sont les mêmes que ci-dessus : note, tip, danger, info, caution. Optionnellement, vous pouvez spécifier une icône en passant un élément JSX ou une chaîne, ou un titre :

MyReactPage.jsx
<Admonition type="tip" icon="💡" title="Savez vous que ...">
<p>
Utilisez des plugins pour introduire une syntaxe plus courte pour les éléments JSX les plus couramment utilisés
dans votre projet.
</p>
</Admonition>
http://localhost:3000
💡Le saviez-vous ...

Utilisez des plugins pour introduire une syntaxe plus courte pour les éléments JSX les plus couramment utilisés dans votre projet.