Utiliser Markdown dans Streamlit

Streamlit supporte Markdown dans tout son API—dans st.markdown(), les étiquettes de widget, les infobulle d'aide, les métriques, les cellules st.table(), et bien plus. Au-delà du Markdown standard compatible GitHub, Streamlit ajoute du texte coloré, des badges, des icônes et du LaTeX.

Référence rapide

Où Markdown fonctionne

Markdown est supporté dans la plupart des endroits où du texte est affiché. Streamlit a trois niveaux de support Markdown :

Markdown complet — Toute la syntaxe du tableau ci-dessus :

• st.markdown(), st.write(), st.caption(), st.info(), st.warning(), st.error(), st.success(), les cellules et en-têtes st.table, les infobulle (paramètre help)

Sous-ensemble pour les étiquettes — Formatage inline uniquement (voir tableau ci-dessus). Les éléments de bloc (p. ex. titres, listes, tableaux) sont silencieusement supprimés :

• Les étiquettes de widget et élément (st.button, st.checkbox, st.radio, st.expander, st.page_link, etc.), les options st.radio et st.select_slider, les noms dans st.tabs, l'étiquette/valeur/delta de st.metric, st.title, st.header, st.subheader, la légende st.image, le titre st.dialog, st.progress, st.spinner.

Aucun Markdown — Le texte s'affiche littéralement :

• st.text(), st.json(), les cellules st.dataframe() / st.data_editor(), les options st.selectbox / st.multiselect, les placeholders d'entrée, les titres st.Page, les étiquettes de graphique/carte

Markdown compatible GitHub

La syntaxe GFM standard fonctionne comme prévu. Les titres reçoivent automatiquement des liens d'ancrage pour la navigation.

st.markdown("""
# Titre

**Gras**, *italique*, ~~barré~~, `code inline`, [liens](url)

- Liste non ordonnée
- [x] Liste de tâches

| Colonne | Colonne |
|--------|--------|
| Cellule   | Cellule   |

> Citation

```python
code_block = "avec coloration syntaxique"
```
""")

Texte coloré, fonds colorés et badges

st.markdown(":red[Erreur] et :green[Succès]")  # Texte coloré
st.markdown(":blue-background[Surligné]")     # Fond coloré
st.markdown(":green-badge[Actif] :red-badge[Inactif]")  # Badges inline

Couleurs disponibles : red, orange, yellow, green, blue, violet, gray/grey, rainbow, primary

Note : rainbow n'est pas supporté pour les fonds ou les badges. Des badges autonomes sont également disponibles via st.badge().

Icônes Material

Utilisez Google Material Symbols avec la syntaxe :material/icon_name:. Trouvez les icônes sur fonts.google.com/icons

st.markdown(":material/check_circle: Complet")

Les icônes Material fonctionnent aussi dans les paramètres icon de nombreux éléments (st.button, st.expander, st.info, etc.).

Emojis

Les emojis Unicode (préférés) et les shortcodes fonctionnent tous les deux.

st.markdown("Bonjour ! 👋 :+1: :tada: :streamlit:")

Note : Les icônes Material sont préférées aux emojis pour une apparence plus professionnelle.

Mathématiques LaTeX

Simple $ pour inline, double $$ pour le mode affichage. Les mathématiques inline nécessitent un caractère non-espace après $ pour éviter les conflits avec les devises (p. ex. « $5 » ne sera pas analysé comme des mathématiques).

# Mathématiques inline
st.markdown("La formule quadratique est $x = \\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}$")

# Mathématiques en mode affichage (centrées, plus grandes)
st.markdown("""
$$
\\sum_{i=1}^{n} x_i = x_1 + x_2 + ... + x_n
$$
""")

Images dans Markdown

st.markdown("![Alt text](https://example.com/image.png)")
st.button("![Logo](app/static/logo.png) Cliquez-moi")  # Image comme icône dans l'étiquette

Dans les étiquettes, les images s'affichent comme des icônes avec une hauteur maximale égale à la hauteur de police.

Markdown dans les étiquettes d'éléments

Les widgets, conteneurs et autres éléments supportent Markdown dans leurs étiquettes (utilisant le sous-ensemble pour les étiquettes).

st.radio(":material/palette: Choisir une **couleur**", [":red-background[Rouge]", ":blue-background[Bleu]", ":green-background[Vert]"])
tab1, tab2 = st.tabs([":material/home: Accueil", ":material/settings: Paramètres"])
st.metric(label=":material/attach_money: Revenu", value=":green[$1,2M]", delta=":material/trending_up: 12%")

Échapper les caractères spéciaux

Utilisez le backslash pour afficher les caractères littéraux : \\[, \\*, 1\\.

st.markdown(":blue[Tableau : \\[1, 2, 3\\]]")
st.button("1\\. Pas une liste")

Markdown dans st.table

st.table() rend Markdown dans les cellules et les en-têtes.

st.table({
    "**Nom**": "Alice",
    "**Statut**": ":green-badge[Actif]",
    "**Rôle**": ":material/shield: Admin"
})

Combiner les fonctionnalités

Mélangez plusieurs fonctionnalités pour un formatage riche.

st.markdown("""
### :material/rocket: Statut du lancement

| Phase | Statut | Notes |
|-------|--------|-------|
| Build | :green-badge[Complet] | Tous les tests réussissent |
| Deploy | :orange-badge[En cours] | ETA : 2 heures |
| Monitor | :gray-badge[En attente] | En attente du deploy |

:small[Dernière mise à jour : à l'instant]
""")

st.markdown - alignement du texte et largeur

Contrôlez la mise en page avec les paramètres text_alignment et width.

st.markdown("Titre centré", text_alignment="center")  # left, center, right, justify
st.markdown("Largeur de contenu uniquement", width="content")  # stretch, content, ou pixels (p. ex. 400)

HTML (à utiliser très parcimonieusement !)

Mélangez Markdown avec HTML en utilisant unsafe_allow_html=True. Pour du HTML pur sans traitement markdown, utilisez st.html() à la place.

st.markdown("**Statut :** <span style='color: coral'>Style personnalisé</span>", unsafe_allow_html=True)
st.html("<div class='custom'>Contenu HTML pur</div>")

Références

• st.markdown
• st.latex
• GitHub-flavored Markdown spec
• Material Symbols
• KaTeX supported functions