Aperçu Markdown

Qu’est-ce qu’un rendu Markdown ?#

Markdown est le raccourci de texte brut qu’emploient les développeurs pour écrire du texte riche : **bold**, # titres, - listes, `code`. Un moteur de rendu est le programme qui transforme ces marques en le HTML qu’un navigateur affiche réellement. Les fichiers README, les sites de documentation, les commentaires de trackers d’incidents, les apps de chat et les générateurs de sites statiques font tous passer le Markdown par un rendu avant de vous le montrer.

Cette page est un moteur de rendu Markdown avec une priorité de conception précise : sûr par construction, et non par filtrage. La plupart des moteurs convertissent d’abord le Markdown en HTML puis tentent de purger les balises dangereuses du résultat — un modèle où une regex oubliée signifie une vulnérabilité XSS. Cet outil fonctionne à l’inverse : chaque caractère de la source est échappé en HTML avant toute application de format, et les seules balises qu’il émet proviennent d’une liste blanche fixe et codée en dur (p, h1–h6, ul, ol, li, blockquote, pre, code, hr, a, img, strong, em, del, br). Il n’existe aucun chemin de code qui puisse émettre une balise <script> depuis votre entrée, parce qu’un < brut dans la source est échappé en < avant que le formateur ne le voie. C’est ce qui le rend propre à un site statique à CSP stricte comme celui-ci.

Il implémente un sous-ensemble ciblé de CommonMark plus les essentiels de GitHub-Flavored Markdown : blocs de code clôturés, titres ATX, paragraphes, listes ordonnées et non ordonnées, blocs de citation, séparateurs thématiques (---), code en ligne, gras, italique, barré, images, liens et autoliens en chevrons. La même entrée vous donne deux sorties côte à côte — l’aperçu rendu et le HTML brut — pour que vous voyiez exactement ce que le rendu a produit.

Comment l’utiliser#

1. Saisissez du Markdown dans le panneau de gauche, ou cliquez sur Exemple pour charger un document intégré qui exerce chaque fonctionnalité gérée.
2. Basculez la sortie avec les deux boutons au-dessus du panneau de droite :
   • Rendu affiche le résultat formaté tel qu’il apparaîtrait sur une page web.
   • Voir HTML affiche le HTML exact émis par le rendu, celui que vous colleriez dans un gabarit ou soumettriez à un audit d’assainisseur.
3. Cliquez sur Copier HTML pour récupérer le HTML généré et l’utiliser ailleurs — le coller dans un CMS, l’embarquer dans un gabarit, ou le soumettre à une revue.
4. Cliquez sur Effacer pour vider les deux panneaux.
5. La ligne d’état indique la longueur en octets du rendu ou signale quand l’entrée est vide.

Fonctionnalités clés#

• Sûr par construction. Tout le texte source est échappé en HTML avant le formatage, et le rendu n’émet qu’une liste blanche fixe de balises. Il n’y a pas d’étape « ensuite on enlève les parties dangereuses » à oublier.
• Schémas d’URL dangereux abandonnés. Les URL de liens et d’images sont vérifiées par schéma ; javascript:, vbscript:, data:, file: et about: sont bloqués, et le texte fautif est affiché littéralement au lieu de devenir un lien actif.
• Deux vues, une source. Basculez entre l’aperçu rendu et le HTML brut sans rien resaisir, pour vérifier à la fois le résultat visuel et le balisage produit.
• Essentiels GFM inclus. Barré (~~texte~~), blocs de code clôturés avec indices de langage, et listes adaptées aux tâches se comportent comme en Markdown aromatisé GitHub.
• Zéro dépendance, 100 % côté client. Le rendu est auto-implémenté — pas de bibliothèque d’analyse embarquée — et s’exécute entièrement dans votre navigateur. Rien n’est téléversé, et il n’y a pas de backend pour rien injecter.

Exemple commenté#

Cliquez sur Exemple et le panneau de gauche se remplit d’un document qui exerce la syntaxe cœur :

# Heading

A paragraph with **bold**, *italic*, ~~strike~~ and `inline code`.

- bullet one
- bullet two

1. first
2. second

> A blockquote.

[a link](https://example.com)

\`\`\`
const x = 42;
console.log(x);
\`\`\`

Basculez sur Voir HTML et vous voyez exactement ce que le rendu a émis. Le paragraphe devient :

<p>A paragraph with <strong>bold</strong>, <em>italic</em>,
<del>strike</del> and <code>inline code</code>.</p>

Le lien devient une cible dure avec des attributs rel/sûrs :

<a href="https://example.com" rel="noopener noreferrer" target="_blank">a link</a>

et le bloc clôturé devient un <pre><code> échappé qui préserve la source à l’identique — const x = 42; apparaît comme texte, et non comme script exécuté. Ce dernier point, c’est toute l’histoire de sécurité en miniature : même si vous colliez <script>alert(1)</script> dans la source, il se rendrait comme le texte littéral <script>alert(1)</script>, parce que le < est échappé en < avant que le formateur ne décide de ce qui est une balise.

FAQ#

Pourquoi utiliser cela plutôt que d’écrire directement le HTML ?#

Parce que Markdown est plus rapide à saisir, plus facile à lire en source, et qu’il laisse des contributeurs peu familiers du HTML écrire du contenu. Ce rendu sert quand vous voulez ce confort sans faire confiance à une bibliothèque d’analyse générique pour être aussi sûre — la sécurité ici vient de l’architecture, et non d’un assainisseur plaqué à la fin.

J’ai collé une balise <script> et elle est apparue comme texte. Est-ce un bogue ?#

Non — c’est le comportement voulu et la garantie de sécurité centrale. Chaque caractère de votre entrée est échappé en HTML avant le formatage, donc tout texte vaguement balise dans la source est rendu comme texte visible inerte. Il n’y a aucun moyen, à travers ce rendu, d’obtenir un <script> actif dans la sortie.

Pourquoi mon lien javascript: est-il affiché comme texte brut ?#

Le rendu vérifie le schéma de chaque URL de lien et d’image. Les schémas comme javascript:, vbscript:, data:, file: et about: sont bloqués parce qu’ils sont les vecteurs classiques des attaques par injection. Quand une URL est bloquée, le rendu laisse la source Markdown originale comme texte littéral au lieu d’émettre une ancre dangereuse.

Gère-t-il les tableaux, les listes de tâches ou les notes de bas de page ?#

Non — c’est un sous-ensemble délibérément ciblé de CommonMark plus les essentiels GFM (code clôturé, barré, autoliens). Les tableaux et les notes de bas de page exigent un analyseur plus riche et une surface d’attaque plus grande à surveiller ; ils sont volontairement hors champ ici. Tenez-vous aux constructions gérées listées dans les fonctionnalités ci-dessus.