Éditeur Markdown avec aperçu HTML

Ce que vous pouvez faire ici

• Afficher le rendu Markdown pendant la saisie.
• Interpréter titres, emphase, listes, citations, tableaux, tâches, liens et code.
• Assainir la sortie de Marked avec DOMPurify avant affichage.
• Copier le fragment HTML propre ou télécharger un document HTML5.
• Traiter le brouillon localement sans compte ni sauvegarde serveur.

Réponse rapide : prévisualiser du Markdown

Remplacez le texte d’exemple dans l’éditeur de gauche. L’aperçu de droite se met à jour immédiatement. Essayez `# Titre`, `**gras**`, une liste commençant par `-`, un lien ou un bloc entre trois accents graves. Quand la structure est satisfaisante, copiez le fragment HTML assaini ou téléchargez un document HTML complet avec encodage UTF-8, viewport et quelques styles de lecture.

La page n’ouvre pas directement un fichier `.md`, ne crée pas de compte et ne garde aucune version. Une actualisation efface le brouillon. Travaillez donc sur une copie et conservez le texte maître dans votre éditeur, dépôt ou CMS. L’aperçu sert à diagnostiquer la structure ; la validation finale doit avoir lieu là où le document sera réellement publié.

Titres, listes, tableaux et blocs de code pris en charge

Marked interprète le Markdown courant et plusieurs conventions souvent associées à GitHub Flavored Markdown : titres `#`, gras, italique, barré, citations, séparateurs, listes ordonnées, listes à puces, cases à cocher, tableaux, liens, images, code en ligne et blocs clôturés. Une ligne vide ou une indentation différente peut changer le bloc obtenu ; comparez le texte source et le rendu.

Une table demande une ligne d’en-têtes puis une ligne de séparation avec des tirets. Une liste imbriquée doit garder une indentation cohérente. Un bloc de code commence et se termine avec la même clôture. L’étiquette `js` ou `bash` peut devenir une classe informative, mais cet outil ne charge pas de coloration syntaxique. Le code est affiché comme texte et n’est pas exécuté.

• Titres de niveau 1 à 6 et paragraphes.
• Listes, tâches, citations et séparateurs.
• Liens, images et tableaux simples.
• Code en ligne et blocs sans exécution.

Différences entre GitHub, Obsidian, Discord et les CMS

Markdown désigne une famille de dialectes, pas un rendu universel. GitHub applique son propre assainissement et résout les chemins relatifs selon le dépôt. Obsidian ajoute wikiliens, embeds et syntaxe interne. Discord ne rend pas les tableaux comme une documentation. Un CMS peut autoriser moins de HTML ou ajouter ses propres extensions. Un bon aperçu ici ne prouve donc pas une apparence identique ailleurs.

Les fonctions Mermaid, mathématiques LaTeX, notes de bas de page propres à une plateforme, frontmatter YAML, wikiliens, shortcodes, composants MDX et blocs Astro ne sont pas interprétées par ce widget. Elles peuvent rester en texte ou disparaître selon leur forme. Si le document en dépend, utilisez le moteur exact du projet et ses tests de construction.

De Markdown à HTML avec Marked et DOMPurify

Marked transforme le Markdown en chaîne HTML. Sa documentation ne présente pas cette sortie comme assainie. FunnyTools la passe donc immédiatement à DOMPurify avant de l’insérer dans le DOM. Les éléments, attributs et URL jugés dangereux sont retirés. Un `<script>` ou un gestionnaire `onerror` ne doit pas s’exécuter dans l’aperçu.

L’assainissement ne prouve ni vérité, ni qualité éditoriale, ni conformité juridique. Un lien HTTPS peut mener vers une page trompeuse, une image externe peut provoquer une requête vers son hébergeur et un texte peut exposer une donnée personnelle. Vérifiez les destinations, droits, textes alternatifs et informations sensibles. Le serveur ou CMS final doit conserver sa propre politique de sécurité.

HTML brut, composants et contenu non fiable

Certains dialectes acceptent du HTML brut dans le Markdown. Marked peut le convertir, puis DOMPurify ne conserve que la partie autorisée. Une balise personnalisée, un attribut `style`, un iframe ou un formulaire peut donc être retiré. C’est une mesure de sécurité du rendu et non un outil de test pour une application web interactive.

N’utilisez pas cet aperçu pour valider React, Vue, Astro, MDX, Web Components ou JavaScript intégré. Un exemple JavaScript placé dans un bloc de code reste inerte ; du JavaScript inséré comme HTML dangereux est éliminé. Pour du contenu fourni par des utilisateurs, gardez aussi un assainissement au moment de la publication et appliquez une politique de liens adaptée.

Préparer un README clair et accessible

Un README efficace commence par un titre principal unique, explique le but en quelques phrases puis organise installation, utilisation, configuration, tests et licence avec des niveaux cohérents. Ne sautez pas de `##` à `####` pour obtenir seulement une taille visuelle. Les personnes utilisant un lecteur d’écran ou parcourant la table des matières dépendent de cette hiérarchie.

Employez un texte de lien descriptif plutôt que « cliquez ici », ajoutez un texte alternatif utile aux images et réservez les tableaux aux données réellement tabulaires. Le Markdown brut doit rester lisible. L’aperçu aide à repérer une liste cassée ou une clôture de code oubliée, mais il ne lance pas d’audit d’accessibilité, de correction orthographique ou de vérification des liens.

Liens, images et chemins relatifs

Les liens apparaissent dans le rendu, mais leurs clics sont bloqués dans le panneau pour éviter une navigation accidentelle pendant la relecture. Vérifiez chaque URL séparément. Un chemin relatif comme `./docs/guide.md` n’a pas ici le contexte du futur dépôt et peut sembler incorrect alors qu’il fonctionnera sur GitHub, ou l’inverse. Contrôlez-le dans l’arborescence réelle.

Une image distante peut déclencher une requête depuis le navigateur vers le domaine indiqué. N’utilisez pas de lien privé, de token signé ou de ressource confidentielle. Le widget ne télécharge pas l’image dans le document, ne l’optimise pas et ne vérifie pas sa licence. Dans le HTML téléchargé, les ressources externes et chemins relatifs restent dépendants de leur emplacement.

Copier le fragment ou télécharger une page HTML

« Copier le HTML assaini » place seulement le fragment de l’aperçu dans le presse-papiers. Il ne contient ni les styles de FunnyTools ni une page complète. Un CMS peut encore supprimer d’autres balises ou classes lors du collage. Inspectez la sortie et n’utilisez jamais la copie comme moyen de contourner le filtre du système cible.

« Télécharger le HTML » crée une page autonome avec doctype HTML5, langue française, UTF-8, viewport et styles de base pour le texte, les tableaux, les citations et le code. Aucun script du Markdown n’est ajouté. Les images et liens restent externes. Ouvrez le fichier localement, puis contrôlez-le à nouveau avant hébergement public.

Confidentialité, sauvegarde et performances

Le Markdown est interprété dans cet onglet et FunnyTools ne sauvegarde ni le brouillon ni le HTML. Le presse-papiers et le fichier téléchargé relèvent ensuite du système d’exploitation. Ne collez pas de secret, token ou documentation confidentielle dans un navigateur non autorisé. Une politique interne peut interdire les extensions ou la synchronisation pour ce type de contenu.

Le rendu est recalculé pendant la saisie. Un très long manuel ou une page contenant de nombreuses images peut ralentir un téléphone. Divisez les documents volumineux et utilisez le générateur officiel du projet pour la production. Cette page ne teste pas frontmatter, métadonnées SEO, liens morts, orthographe, compilation MDX, ancres automatiques ni cohérence entre plusieurs fichiers.

Mode d’emploi étape par étape

1. Conservez le fichier original et collez une copie du Markdown.
2. Relisez titres, listes, tableaux, tâches, liens, images et clôtures de code.
3. Vérifiez que tout HTML non fiable reste inerte après assainissement.
4. Copiez le fragment ou téléchargez la page selon votre besoin.
5. Testez finalement le document dans GitHub, Obsidian ou le CMS cible.

Dans quelles situations cet outil est utile

• Relire un README français avant le commit.
• Vérifier une table et une liste de tâches de documentation.
• Convertir un petit brouillon Markdown en fragment HTML assaini.
• Repérer un bloc de code dont la clôture manque.
• Préparer une page HTML simple pour lecture locale.

Exemples détaillés

Limites et vérifications importantes

• La sortie de Marked est assainie avec DOMPurify.
• Mermaid, LaTeX, MDX et wikiliens ne sont pas pris en charge.
• Les blocs de code ne sont ni exécutés ni colorés automatiquement.
• Les clics de liens sont bloqués dans l’aperçu.
• Le brouillon disparaît lorsque la page est rechargée.

Questions fréquentes