Aller au contenu principal
Version: 2.0.0-beta.8

Table des matières en ligne

Chaque document Markdown affiche une table des matières du contenu en haut à droite.

Mais il est également possible d'afficher une table des matières en ligne directement à l'intérieur d'un document markdown, grâce à MDX.

Table des matières complète

La variable toc est disponible dans n'importe quel document MDX, et contient toutes les entêtes d'un document MDX.

Par défaut, seuls les entêtes h2 et h3 sont affichés dans la table des matières. Vous pouvez changer la visibilité des niveaux de titre en définissant minHeadingLevel ou maxHeadingLevel.

import TOCInline from '@theme/TOCInline';

<TOCInline toc={toc} />;

Table des matières personnalisée

Les props toc sont juste une liste d'éléments de la table des matières :

type TOCItem = {
value: string;
id: string;
children: TOCItem[];
level: number;
};

Vous pouvez créer cet arbre de la table des matières manuellement ou obtenir un nouvel arbre de la table des matières à partir de la variable toc :

import TOCInline from '@theme/TOCInline';

<TOCInline
toc={
// Only show 3th and 5th top-level heading
[toc[2], toc[4]]
}
/>;

caution

Le contenu ci-dessous n'est qu'un exemple pour avoir plus d'éléments pour la table des matières disponibles dans la page courante.

Exemple Section 1

Lorem ipsum

Exemple de sous-section 1 a

Lorem ipsum

Exemple de sous-section 1 b

Lorem ipsum

Exemple de sous-section 1 c

Lorem ipsum

Exemple Section 2

Lorem ipsum

Exemple de sous-section 2 a

Lorem ipsum

Exemple de sous-section 2 b

Lorem ipsum

Exemple de sous-section 2 c

Lorem ipsum

Exemple de section 3

Lorem ipsum

Exemple de sous-section 3 a

Lorem ipsum

Exemple de sous-section 3 b

Lorem ipsum

Exemple de sous-section 3 c

Lorem ipsum