Contenu en ligne

Utilisez la palette en ligne pour ajouter des images, des liens, des éléments mathématiques et TeX, et plus encore

Ajoutez des éléments en ligne à votre contenu.

La palette inline vous permet d’ajouter rapidement du contenu supplémentaire à votre bloc de texte sans quitter le clavier. Appuyez simplement sur / sur n’importe quel bloc de texte pour ouvrir la palette inline. Le slash sera remplacé par le contenu que vous choisissez d’insérer.

Annotations

Avec les annotations, vous pouvez ajouter du contexte supplémentaire à vos mots sans rompre le fil de lecture. Vous pouvez les utiliser pour expliquer le sens d’un mot, insérer des informations supplémentaires, et plus encore. Les lecteurs peuvent survoler le texte annoté pour afficher l’annotation au-dessus du texte.

Créer une annotation

Pour créer une annotation, sélectionnez le texte que vous souhaitez annoter et cliquez sur le Annoter option du menu contextuel. Une fois votre annotation rédigée, cliquez en dehors pour continuer à écrire dans le bloc de texte.

Représentation Markdown

Vous pouvez écrire du contenu sous forme de notes de bas de page Markdown pour les ajouter comme annotations dans GitBook. Les indicateurs de note de bas de page doivent apparaître immédiatement après le mot que vous souhaitez annoter ; ils ne doivent pas apparaître après des signes de ponctuation ou d’autres symboles.

Voici une simple note de bas de page[^1], et voici une plus longue[^bignote].

[^1]: Voici la première note de bas de page.

[^bignote]: Voici une note avec plusieurs paragraphes et du code.

    Indentez les paragraphes pour les inclure dans la note de bas de page.

    `{ my code }`

    Ajoutez autant de paragraphes que vous le souhaitez.

Exemple rendu

La source Markdown crée une annotation sur le texte référencé :

Les annotations ajoutent du contexte supplémentaire[^annotation-example].

[^annotation-example]: Survolez « contexte supplémentaire » pour lire cette annotation.

Le rendu est le suivant. Survolez le texte annoté pour prévisualiser l’annotation :

Les annotations ajoutent du contexte supplémentaire.

Images

Les images en ligne apparaîtront à côté de votre texte sur la page.

Par défaut, les images sont définies à leur taille d’origine avec une largeur maximale de 300 px. Vous pouvez modifier la taille en cliquant sur l’image pour ouvrir la palette de mise en forme, puis en choisissant l’une des trois options :

1. Taille en ligne : L’image est dimensionnée proportionnellement à la police — idéal pour les icônes et les badges.
2. Taille originale : L’image restera en ligne à sa taille d’origine, avec une largeur maximale de 300 pixels.
3. Convertir en bloc : Cela transforme une image en ligne en bloc d’image, dont la largeur correspond à celle de votre contenu.

Les blocs d’image offrent davantage d’options, notamment plus de tailles et la possibilité d’ajouter une légende — mais ils n’apparaîtront pas en ligne avec votre texte.

Représentation en Markdown

Voici une image en ligne : <img src=".gitbook/assets/GitBook - Dark.jpg" alt="Dark version of GitBook logo" data-size="line">

Le rendu est le suivant : Voici une image en ligne :

Émojis

Vous pouvez ajouter des émojis en appuyant sur / pour ouvrir la palette inline. Vous pouvez aussi taper : et une liste d’émojis apparaîtra directement dans le texte — vous pouvez commencer à taper le nom d’un émoji pour affiner la sélection.

Représentation en Markdown

:house:
:smile:
:dog:

Ils s’affichent comme suit : 🏠 😄 🐶

Liens

Vous pouvez insérer trois types de liens différents :

• Liens relatifs
• Liens absolus
• Adresse e-mail mailto liens

Liens relatifs

Les liens relatifs sont des liens créés en renvoyant vers des pages qui existent déjà dans votre section. L’avantage des liens relatifs est que si l’URL, le nom ou l’emplacement de la page change, sa référence restera à jour — vous vous retrouverez donc avec moins de liens cassés.

Voici comment insérer un lien relatif :

1. Cliquez à l’endroit de votre paragraphe où vous souhaitez insérer le lien, ou sélectionnez du texte.
2. Appuyez sur / pour ouvrir la palette inline et choisissez Lien, cliquez sur le Lien bouton du menu contextuel, ou appuyez sur ⌘ + K.
3. Commencez à taper le titre de la page vers laquelle vous souhaitez créer le lien.
4. Sélectionnez la page dans les résultats de recherche déroulants.
5. Appuyez sur Entrée.

Liens absolus

Les liens absolus sont des liens externes que vous pouvez copier et coller dans votre contenu. Ils sont parfaits lorsque vous souhaitez créer un lien vers quelque chose en dehors de votre documentation.

Pour insérer un lien absolu :

1. Cliquez à l’endroit de votre paragraphe où vous souhaitez insérer le lien, ou sélectionnez du texte.
2. Appuyez sur / pour ouvrir la palette inline et choisissez Lien, cliquez sur le Lien bouton du menu contextuel, ou appuyez sur ⌘ + K.
3. Collez l’URL vers laquelle vous souhaitez créer un lien.
4. Appuyez sur Entrée.

Pourquoi les liens externes ne s’ouvrent-ils pas dans un nouvel onglet ?

Lorsque vous ajoutez un lien vers un site externe dans vos docs, il s’ouvrira dans le même onglet.

GitBook suit ce comportement recommandé par le W3C pour prendre en charge l’accessibilité et garantir une expérience cohérente et inclusive à vos lecteurs.

Liens mailto d’adresse e-mail

Adresse e-mail mailto sont utiles lorsque vous souhaitez que vos visiteurs cliquent sur un lien qui ouvrira leur client de messagerie par défaut et remplira le À champ avec l’adresse e-mail de votre lien, afin qu’ils puissent rédiger un e-mail à envoyer.

Voici comment insérer un mailto lien d’adresse e-mail :

1. Cliquez à l’endroit de votre paragraphe où vous souhaitez insérer le lien, ou sélectionnez du texte.
2. Appuyez sur / pour ouvrir la palette inline et choisissez Lien, cliquez sur le Lien bouton du menu contextuel, ou appuyez sur ⌘ + K.
3. Collez ou saisissez mailto:[e-mail], en remplaçant [e-mail] par l’adresse e-mail que vous souhaitez utiliser.
4. Appuyez sur Entrée.

Représentation en Markdown

[Voici un lien relatif vers une autre page dans cette section](../content-structure/page.md)
[Voici un lien absolu](https://www.gitbook.com/blog)
[Voici un lien](mailto:[e-mail]) vers notre adresse e-mail d’assistance

Ils s’affichent comme suit :

Voici un lien relatif vers une autre page dans cette section Voici un lien absolu Voici un lien vers notre adresse e-mail d’assistance

Mathématiques et TeX

Grâce à cette option, vous pouvez créer des formules mathématiques en ligne dans votre contenu. Nous utilisons la KaTeX bibliothèque pour rendre les formules.

Vous pouvez également insérer une formule mathématique au niveau du bloc en ouvrant la palette de commandes dans un bloc vide et en choisissant la deuxième option Mathématiques et TeX.

Représentation en Markdown

Voici une formule en ligne : $$f(x) = x * e^{2 pi i \\xi x}$$

Le rendu est le suivant : Voici une formule en ligne : $f(x) = x * e^{2 pi i \xi x}$

Boutons

Les boutons sont un excellent moyen de mettre en évidence les appels à l’action ou d’ajouter une barre de recherche ou Demander à l’IA à vos docs. Vous pouvez les utiliser pour envoyer les lecteurs quelque part ou les aider à trouver des réponses.

Actions des boutons

Les boutons peuvent faire plus que renvoyer vers une URL. Vous pouvez également transformer un bouton en barre de recherche ou en barre Demander à l’IA / Assistant GitBook — directement depuis la page. Ces actions fonctionnent aussi sur les pages publiées — comme vous pouvez le voir dans les exemples ci-dessous.

Vous pouvez configurer les actions suivantes :

Ajouter un bouton de lien

Envoyer les lecteurs vers une autre page ou une URL externe :En savoir plus sur l’Assistant

Ajouter une barre de recherche

Ouvrez la recherche avec une requête prédéfinie facultative :

Ajouter une barre Demander à l’IA / Assistant GitBook

Ouvrez GitBook Assistant avec une invite prédéfinie facultative :

Ajouter un bouton désactivé

Afficher un bouton délibérément inactif :

Créer et configurer un bouton

1. Tapez / et choisissez Bouton.
2. Cliquez sur le bouton pour ouvrir le Libellé menu.
3. Choisissez une action, puis définissez le libellé et le style.
4. Facultatif : ajoutez une requête de recherche prédéfinie ou une invite de l’Assistant.

Styles

Les boutons de lien et les boutons inactifs ont des styles principal et secondaire. Voici deux exemples :

Inscrivez-vous à GitBook Retour en haut

Représentation en Markdown

<a href="https://app.gitbook.com" class="button primary">GitBook</a>

Le rendu est le suivant : GitBook

Icônes

Les icônes ajoutent un contexte visuel aux paragraphes, aux cartes et à d’autres contenus. Elles utilisent le style visuel défini dans vos paramètres de personnalisation.

Utilisez un <i> élément avec les deux formes du nom de l’icône. La classe Font Awesome et le jeton doivent correspondre :

<i class="fa-rocket">:rocket:</i>

Choisissez un nom d’icône dans le sélecteur d’icônes Font Awesome. Les noms non pris en charge peuvent ne pas s’afficher ou être conservés par Git Sync.

Représentation en Markdown

<i class="fa-github">:github:</i>

Le rendu est le suivant :

Expressions

Les expressions vous permettent d’afficher dynamiquement du contenu défini dans une variable. Les expressions peuvent être insérées depuis le / menu. Une fois insérée, un clic sur l’expression ouvrira l’éditeur d’expression, vous permettant de référencer et de formater conditionnellement votre variable.

Représentation en Markdown

Bienvenue sur <code class="expression">page.vars.inlineExampleProduct</code>.

Le rendu est le suivant : Bienvenue sur GitBook.