Spécimen — Thème Atelier

PM44 — Laboratoire d’apparence Quarto

Emmanuel BRUNO

Université de Toulon

LIS UMR CNRS 7020

2026-10-21

Ce spécimen exerce exactement les mêmes composants dans les trois formats (HTML, Revealjs, Typst) afin que la comparaison entre thèmes soit purement visuelle. Thème Atelier : cours dingénierie — titres Inter majuscules, corps Source Serif 4, fond papier, accent orange brûlé, blocs de code teintés.

1 Typographie

1.1 Échelle des titres

Le corps courant est serif ; les titres sont en Inter, resserrés d’un cheveu.

1.1.1 Quatrième niveau

Cinquième niveau de hiérarchie, pour tester la ladder complète.

Un paragraphe avec gras sémantique, italique, du code inline et un lien vers Quarto.

« La typographie est la manière dont une langue s’habille elle-même. » — Ellen Lupton

2 Encadrés

Note

Un encadré neutre : information contextuelle.

Astuce

Un encadré d’astuce : bonne pratique d’atelier.

Avertissement

Un encadré d’avertissement : piège connu.

Important

Un encadré important : contrainte à retenir.

3 Tableau

Table 1: Composition minimale attendue d’une leçon.

Champ	Type	Rôle
`id`	UUID	Identifiant stable
`titre`	Texte	Affichage courant
`slug`	Texte	URL stable, en anglais

4 Mathématiques

L’estimateur de maximum de vraisemblance maximise la log-vraisemblance :

\[ \hat{\theta}_{\text{MV}} = \arg\max_{\theta}\; \ell(\theta), \qquad \ell(\theta) = \sum_{i=1}^{n} \log p(x_i \mid \theta). \]

5 Diagramme

#| label: fig-chaine
#| fig-cap: "Chaîne de rendu du gabarit : un même `.qmd`, trois profils de sortie."
flowchart LR
  A[Quarto] --> B{Profil}
  B -->|notes| C[HTML + Typst]
  B -->|slides| D[Revealjs]

6 Code

def suite(n: int) -> list[int]:
    """Premiers termes de la suite de Fibonacci."""
    a, b = 0, 1
    out = []
    for _ in range(n):
        out.append(a)
        a, b = b, a + b
    return out

git submodule update --init --recursive
quarto preview . --profile notes

7 Listes & liens

Vérifier le contraste des accentations (WCAG AA minimum) ;
Fournir les polices locales pour Typst (format.typst.fonts) ;
Tester les trois formats avant de figer un thème.

Lire la leçon en HTML ;
Projeter les slides en Revealjs ;
Imprimer les notes en Typst/PDF.

Voir aussi : la galerie et le dépôt partagé _quarto-utils.