Comment convertir Markdown en HTML : un guide complet
Comment convertir Markdown en HTML
Markdown est conçu pour l'Ă©criture, mais le web fonctionne avec HTML. Chaque document Markdown doit ĂȘtre converti en HTML avant qu'un navigateur puisse l'afficher. Ce guide couvre les principales mĂ©thodes de conversion de Markdown en HTML.
Méthode 1 : Outils en ligne de commande
Pandoc
Pandoc est le convertisseur de documents universel prenant en charge des dizaines de formats.
# Basic conversion
pandoc input.md -o output.html
# Standalone HTML with <html> and <body> tags
pandoc input.md -o output.html -s
# With table of contents
pandoc input.md -o output.html -s --toc
Python-Markdown
pip install markdown
python -m markdown input.md > output.html
import markdown
with open("input.md", "r") as f:
text = f.read()
html = markdown.markdown(text, extensions=["fenced_code", "tables"])
CommonMark (JavaScript)
npm install commonmark
const commonmark = require("commonmark");
const reader = new commonmark.Parser();
const writer = new commonmark.HtmlRenderer();
const parsed = reader.parse("# Hello\nThis is **bold**.");
const html = writer.render(parsed);
Méthode 2 : Générateurs de sites statiques
Jekyll
Jekyll alimente GitHub Pages. Il convertit les fichiers Markdown de _posts ou des collections en HTML.
gem install jekyll bundler
jekyll new my-site
jekyll build
jekyll serve
Utilise le processeur Kramdown avec les modĂšles Liquid pour le contenu dynamique.
Hugo
Hugo est un générateur de sites statiques basé sur Go, connu pour ses vitesses de construction de l'ordre de la milliseconde.
hugo new site my-site
hugo new posts/my-first-post.md
hugo server -D
Utilise Goldmark comme moteur de rendu Markdown par défaut, avec la prise en charge des tableaux, des blocs de code délimités et des notes de bas de page.
Next.js (MDX)
Next.js prend en charge MDX, qui intĂšgre des composants React dans Markdown.
npm install next @next/mdx @mdx-js/loader
MDX vous permet d'inclure des exemples de code interactifs, des graphiques et des formulaires dans la documentation.
Méthode 3 : Convertisseur en ligne
Pour des conversions ponctuelles sans installer d'outils, les convertisseurs basés sur le navigateur fournissent des résultats instantanés :
- Collez ou saisissez du Markdown dans le panneau de l'éditeur.
- La sortie HTML apparaßt en temps réel.
- Copiez le HTML généré pour l'utiliser dans n'importe quelle page web ou CMS.
L'outil d'aperçu Markdown traite le GitHub Flavored Markdown â tableaux, blocs de code, listes de tĂąches et texte barrĂ© â entiĂšrement dans votre navigateur.
Méthode 4 : Extensions d'éditeur
| Ăditeur | Fonction | Commande |
|--------|---------|---------|
| VS Code | Aperçu intégré | Ctrl+Shift+V |
| Sublime Text | MarkdownPreview | Alt+M |
| IntelliJ IDEA | Prise en charge intégrée | Documentation rapide |
| Vim | vim-markdown | :MarkdownPreview |
Le pipeline de traitement
Lorsqu'un générateur de sites statiques convertit Markdown en HTML, il suit ce pipeline :
Markdown â Parse to AST â Apply extensions â Render to HTML â Apply template â Output page
Si une fonctionnalité ne s'affiche pas comme prévu, le problÚme vient généralement de l'analyseur (il ne prend pas en charge la syntaxe) ou du moteur de rendu (il produit du HTML inattendu).
Convertir Markdown en HTML en ligne
Utilisez l'outil d'aperçu Markdown pour convertir Markdown en HTML instantanément. Saisissez ou collez du Markdown dans l'éditeur, et l'aperçu rendu se met à jour en temps réel.