Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Exemples

Cette page présente tous les éléments visuels du thème : Markdown standard et classes CSS personnalisées.

Typographie

Titre h1

Titre h2

Titre h3

Titre h4

Titre h5

Un paragraphe de texte courant. Depuis la création d’Hubblo début 2020, les conditions de viabilité sur terre se sont dégradées. Pour espérer rester sous +1.5°C de réchauffement global, il est nécessaire d’infléchir au plus vite la courbe mondiale des émissions de Gaz à Effets de Serre.

Texte en gras, texte en italique, texte barré, code inline.

Exposant : CO2 et H2O — Indice : x2 + y2

écrit <sub>1</sub> pour le indice et <sup>1</sup> pour les exposant. La sytaxe markdown ~1~ et^1^ n’est pas suporté par md-book.

Lien : Hubblo

Listes

Liste non ordonnée :

  • Premier élément
  • Deuxième élément
    • Sous-élément
    • Sous-élément
  • Troisième élément

Liste ordonnée :

  1. Premier élément
  2. Deuxième élément
  3. Troisième élément

Liste de tâches :

  • Tâche non complétée
  • Tâche complétée
  • Autre tâche

Citations (blockquote)

Texte d’une citation.

Blockquotes avec type

Note

Une note informative.

Tip

Un conseil utile.

Warning

Un avertissement à prendre en compte.

Important

Une information importante.

Caution

Un message de mise en garde.

Code

Code inline : npm run build

Bloc de code :

mdbook build
mdbook serve --open

<div class="layout-grid">
  <img src="images/a.png" alt="" loading="lazy">
  <img src="images/b.png" alt="" loading="lazy">
</div>

Tableau

Colonne AColonne BColonne C
Valeur 1Valeur 2Valeur 3
Valeur 4Valeur 5Valeur 6
Valeur 7Valeur 8Valeur 9

Légende (figcaption)

OptionDescription
dataChemin vers les fichiers de données.
engineMoteur de rendu des templates.
extExtension utilisée pour les fichiers de destination.
Tableau avec légende via figure + figcaption

Taille de texte

Texte text-xs — Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.

Texte text-sm — Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.

Texte text-md — Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.

Texte text-lg — Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.

Texte text-xl — Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.

Texte text-2xl — Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.

Layout

full-width

Contenu qui déborde de la colonne de texte et occupe toute la largeur de la page.

<figure class="layout-full-width">
  <img src="images/exemple.png" alt="" loading="lazy">
  <figcaption>Légende</figcaption>
</figure>
Exemple image pleine largeur
Image en layout-full-width avec légende

Avec un tableau :

<figure class="layout-full-width">

| Colonne A | Colonne B | ... |
| --------- | --------- | --- |
| Valeur 1  | Valeur 2  | ... |

<figcaption>Légende</figcaption>
</figure>
Colonne AColonne BColonne CColonne DColonne EColonne FColonne GColonne HColonne IColonne JColonne KColonne L
Valeur 1Valeur 2Valeur 3Valeur 4Valeur 5Valeur 6Valeur 7Valeur 8Valeur 9Valeur 10Valeur 11Valeur 12
Valeur 13Valeur 14Valeur 15Valeur 16Valeur 17Valeur 18Valeur 19Valeur 20Valeur 21Valeur 22Valeur 23Valeur 24
Valeur 25Valeur 26Valeur 27Valeur 28Valeur 29Valeur 30Valeur 31Valeur 32Valeur 33Valeur 34Valeur 35Valeur 36
Valeur 37Valeur 38Valeur 39Valeur 40Valeur 41Valeur 42Valeur 43Valeur 44Valeur 45Valeur 46Valeur 47Valeur 48
Valeur 49Valeur 50Valeur 51Valeur 52Valeur 53Valeur 54Valeur 55Valeur 56Valeur 57Valeur 58Valeur 59Valeur 60
Valeur 61Valeur 62Valeur 63Valeur 64Valeur 65Valeur 66Valeur 67Valeur 68Valeur 69Valeur 70Valeur 71Valeur 72
Valeur 73Valeur 74Valeur 75Valeur 76Valeur 77Valeur 78Valeur 79Valeur 80Valeur 81Valeur 82Valeur 83Valeur 84
Valeur 85Valeur 86Valeur 87Valeur 88Valeur 89Valeur 90Valeur 91Valeur 92Valeur 93Valeur 94Valeur 95Valeur 96
Tableau en layout-full-width

Grid

Grille à 2 colonnes (défaut) :

<div class="layout-grid">
  <img src="images/a.png" alt="" loading="lazy">
  <img src="images/b.png" alt="" loading="lazy">
</div>

Grille à 3 colonnes :

<div class="layout-grid" style="--col: 3">
  <img src="images/a.png" alt="" loading="lazy">
  <img src="images/b.png" alt="" loading="lazy">
  <img src="images/c.png" alt="" loading="lazy">
</div>

Grille à 4 colonnes :

<div class="layout-grid" style="--col: 4">
  <img src="images/a.png" alt="" loading="lazy">
  <img src="images/b.png" alt="" loading="lazy">
  <img src="images/c.png" alt="" loading="lazy">
  <img src="images/d.png" alt="" loading="lazy">
</div>

Auto-grid

Colonnes automatiques selon la place disponible. La largeur minimale d’une colonne est configurable via --min (défaut : 200px) :

<div class="layout-auto-grid" style="--min: 200px">
  <img src="images/a.png" alt="" loading="lazy">
  <img src="images/b.png" alt="" loading="lazy">
  <img src="images/c.png" alt="" loading="lazy">
</div>

Logos

Rangée de logos à taille normalisée (max 170×120 px) :

<div class="layout-logos">
  <img src="images/logo-a.svg" alt="Logo A" loading="lazy">
  <img src="images/logo-b.svg" alt="Logo B" loading="lazy">
</div>
ADEME ARCOM Hubblo AAC 2025

Notes de bas de page

Un paragraphe avec une note de bas de page1. On peut en mettre plusieurs2 dans le même texte, y compris des notes avec un identifiant nommé3.

MathJax

Formule inline dans un paragraphe : l’énergie est définie par \( E = mc^2 \), où \( m \) est la masse et \( c \) la vitesse de la lumière.

Formule en bloc :

\[ \int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2} \]

Autre exemple pour une longue formule avec layout-full-width :

\[ {Reported Annual Environmental Impacts} = \frac{\text{Environmental impacts calculated over the duration of the life cycle under consideration}}{\text{Duration of use associated with the\text life cycle under consideration}} \]

\[ \text{Environmental impact of the refurbished product (per year)} = \frac{\text{Imp}_{\text{prodrefurb}} + \text{Imp}_{\text{distribrefurb}} + \text{Imp}_{\text{userefurb}}}{D_{\text{userefurb}}} \]

Combinaisons

layout-full-width + text-sm + figcaption

<figure class="layout-full-width text-sm">

| Colonne A | Colonne B | ... |
| --------- | --------- | --- |
| Valeur 1  | Valeur 2  | ... |

<figcaption>Légende</figcaption>
</figure>
Colonne AColonne BColonne CColonne DColonne EColonne FColonne GColonne HColonne IColonne JColonne KColonne L
Valeur 1Valeur 2Valeur 3Valeur 4Valeur 5Valeur 6Valeur 7Valeur 8Valeur 9Valeur 10Valeur 11Valeur 12
Valeur 13Valeur 14Valeur 15Valeur 16Valeur 17Valeur 18Valeur 19Valeur 20Valeur 21Valeur 22Valeur 23Valeur 24
Valeur 25Valeur 26Valeur 27Valeur 28Valeur 29Valeur 30Valeur 31Valeur 32Valeur 33Valeur 34Valeur 35Valeur 36
Valeur 37Valeur 38Valeur 39Valeur 40Valeur 41Valeur 42Valeur 43Valeur 44Valeur 45Valeur 46Valeur 47Valeur 48
layout-full-width + text-sm + figcaption

MathJax + text-xl + figcaption

\[ \int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2} \]

MathJax + text-xl + figcaption

Blockquote

Une grande citation

blockquote + text-xl + figcaption

  1. Contenu de la première note. ↩

  2. Contenu de la deuxième note. ↩

  3. Une note plus longue, qui peut contenir plusieurs phrases. Elle fonctionne de la même façon que les autres notes. ↩