Style inline avec Quarto

Appliquez rapidement des styles CSS inline dans Quarto pour vos documents HTML avec la syntaxe []{}. Mettez un texte en évidence instantanément, sans écrire une classe CSS complète.

13 avril 2024 · 2 minutes de lecture

Voir la source

Christophe

Amoureux de Markdown, WSL et Docker ~ Curieux insatiable.

Cet article existe aussi en anglais — lire la version originale.

Traduction automatique

Cette traduction a été produite par une IA. Elle peut contenir des contresens ou des maladresses, en particulier sur les termes techniques. En cas de doute, consultez l'article de référence en anglais — c'est lui qui fait foi.

Cet article a plus d'un an, mais il a été relu le 30 juillet 2026 — son contenu est toujours exact.

Cet article fait partie de la série Découvrir Quarto :

Style inline avec Quarto

⚡

TL;DR

Cet article présente la syntaxe de span CSS inline de Quarto [text]{style="..."}, pratique pour styler rapidement un bout de texte (couleur, fond, etc.) sans définir de classe CSS — sachant qu'elle ne fonctionne qu'en sortie HTML et qu'elle est ignorée silencieusement en Word ou en PDF.

Pas envie de perdre du temps à créer une classe CSS et à comprendre comment l'intégrer dans Quarto juste pour mettre en évidence une partie de votre paragraphe ?

Quarto supporte une syntaxe de style CSS inline pour produire des documents HTML (cela ne fonctionne pas pour, par exemple, le pdf ou le docx). Si c'est le contenu lui-même, et pas seulement son style, qui doit varier d'un format à l'autre, voyez Affichage conditionnel avec Quarto.

Syntaxe

Vous pouvez appliquer des styles à du texte inline en créant des spans : [] entoure le texte à styler et {} définit le style à appliquer.

Donc, pour afficher un texte comme rouge en rouge, la syntaxe Quarto est [red]{style="color: red;"}. Le texte entre crochets recevra le style CSS inline spécifié.

# Inline style

To draw attention to a specific part of the text, you might want to make it [red]{style="color: red;"} with a [yellow background]{style="background-color: yellow;"}; [like this]{style="color: red; background-color: yellow;"}.

Le rendu est correct en HTML :

html