- Convertisseur Markdown vers HTML

Pourquoi convertir Markdown en HTML

Pour qui : Développeurs, rédacteurs techniques, créateurs de contenu, équipes DevOps, blogueurs.

Le Markdown est devenu la lingua franca de la documentation technique. GitHub, GitLab, Notion, Confluence, VS Code, Obsidian — tous s'appuient sur ce format pour sa lisibilité et sa portabilité. Mais pour l'afficher dans un navigateur, sur un site web ou dans une application, il faut le convertir en HTML.

Le problème : les outils classiques sont soit trop lourds (librairies Node.js de 2 Mo), soit trop limités (parseurs basiques qui ratent les tableaux GFM), soit payants. Ce convertisseur offre une alternative 100% client-side, rapide et gratuite.

Les cas d'usage concrets

• 📄 Générer un README HTML pour intégrer dans une page d'accueil projet
• ✍️ Rédiger des articles en Markdown et obtenir le HTML prêt pour WordPress ou un CMS
• 📖 Documenter une API avec des tableaux Markdown → HTML sémantique
• 📷 Prévisualiser des emails rédigés en Markdown avant envoi
• ⚙️ Intégrer dans un pipeline CI/CD pour générer de la documentation statique
• 🎓 Cours et formations — créer des supports HTML depuis des notes Markdown

Syntaxe Markdown complète

Ce convertisseur supporte l'ensemble de la spécification CommonMark et les extensions GFM (GitHub Flavored Markdown) les plus utilisées.

Titres

# Titre H1
## Titre H2
### Titre H3
#### Titre H4
##### Titre H5
###### Titre H6

Mise en forme du texte

**Gras** ou __Gras__
*Italique* ou _Italique_
***Gras et italique***
~~Barré~~
`Code inline`

Listes

- Élément 1
- Élément 2
  - Sous-élément (indentation 2 espaces)
* Autre style
+ Encore un autre


1. Premier
2. Deuxième
3. Troisième

Liens et images

[Texte du lien](https://example.com)
![Texte alternatif](https://example.com/image.png)

Blocs de code

```javascript
// Code JavaScript avec coloration syntaxique
const greet = (name) => `Hello, ${name}!`;
console.log(greet('World'));
```

```bash
npm install && npm start
```

Citations (Blockquotes)

> Ceci est une citation.
> Elle peut s'étendre sur plusieurs lignes.
>
> Avec un saut de ligne à l'intérieur.

Tableaux GFM

| Colonne 1 | Colonne 2 | Colonne 3 |
|-----------|:---------:|----------:|
| Gauche    | Centré    |    Droite |
| données   | données   |   données |

Les alignements sont contrôlés par le positionnement du : dans la ligne de séparation.

Autres éléments

---          
***          

> Note : les liens auto-détectés et les footnotes ne sont pas encore supportés.

Comment utiliser ce convertisseur

1. Saisir ou coller du Markdown dans le panneau gauche — l'aperçu se met à jour en temps réel (délai 250 ms)
2. Charger un exemple — cliquez README, Article ou Doc API pour voir la conversion en action
3. Basculer entre Aperçu et HTML brut via les onglets du panneau droit
4. Activer "Envelopper dans <article>" pour obtenir un HTML sémantique prêt à coller dans un template
5. Copier le HTML — le bouton "Copier HTML" place le code dans votre presse-papiers
6. Effacer pour recommencer

Astuce : conversion en temps réel

L'outil utilise un debounce de 250 ms — il attend que vous ayez fini de taper avant de recalculer. Cela évite les ralentissements sur de gros documents tout en gardant la réactivité pour les saisies normales.

Exemple : README → page d'accueil

# Mon API REST

## Installation
```bash
npm install
```

## Endpoints
| Route      | Méthode | Description    |
|------------|---------|----------------|
| /users     | GET     | Liste des users |
| /users/:id | GET     | Un user         |

Intégrer Markdown dans vos projets

Au-delà de cet outil en ligne, voici comment intégrer la conversion Markdown → HTML directement dans votre stack technique.

Node.js avec marked.js

marked est la librairie de référence — rapide, conforme CommonMark, 0 dépendance.

// Installation
npm install marked

// Utilisation basique
import { marked } from 'marked';

const markdown = `
# Titre
**Gras** et *italique*.
- Item 1
- Item 2
`;

const html = marked.parse(markdown);
console.log(html);
// <h1>Titre</h1>
// <p><strong>Gras</strong> et <em>italique</em>.</p>
// <ul><li>Item 1</li><li>Item 2</li></ul>

PHP avec Parsedown

Pour les backends PHP (WordPress, Laravel, Symfony), Parsedown est la solution la plus populaire.

// Installation via Composer
composer require erusev/parsedown

// Utilisation
require 'vendor/autoload.php';

$Parsedown = new Parsedown();
$markdown  = file_get_contents('article.md');
$html      = $Parsedown->text($markdown);

echo $html;

Python avec mistune

# Installation
pip install mistune

# Utilisation
import mistune

markdown = """
# Mon titre
Paragraphe avec **gras** et *italique*.
"""

html = mistune.html(markdown)
print(html)

Côté client avec marked.js (navigateur)

<!-- Via CDN -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

<script>
// Configurer marked.js
marked.setOptions({
    gfm: true,        // GitHub Flavored Markdown
    breaks: false,    // Sauts de ligne automatiques
    sanitize: false,  // Désactivé (utiliser DOMPurify séparément)
});

const md = document.getElementById('markdown-input').value;
document.getElementById('preview').innerHTML = marked.parse(md);
</script>

Markdown dans Angular et React

Angular — ngx-markdown

ngx-markdown est la solution officielle pour Angular. Elle supporte la syntaxe GFM, la coloration syntaxique et le lazy loading.

// Installation
npm install ngx-markdown marked

// app.module.ts
import { MarkdownModule } from 'ngx-markdown';

@NgModule({
    imports: [
        MarkdownModule.forRoot(),
    ],
})
export class AppModule {}

// composant.component.html
<markdown [data]="markdownContent"></markdown>

// ou avec un fichier .md externe
<markdown src="assets/docs/guide.md"></markdown>

Exemple complet — Blog Angular avec Markdown :

// blog-post.component.ts
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
    selector: 'app-blog-post',
    template: `
        <article class="blog-post">
            <h1>{{ title }}</h1>
            <markdown [data]="content"></markdown>
        </article>
    `
})
export class BlogPostComponent implements OnInit {
    title = 'Mon article';
    content = '';

    constructor(private http: HttpClient) {}

    ngOnInit(): void {
        this.http.get('assets/posts/mon-article.md', { responseType: 'text' })
            .subscribe(md => this.content = md);
    }
}

React — react-markdown

// Installation
npm install react-markdown remark-gfm

// Composant React
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

function BlogPost({ content }) {
    return (
        <article>
            <ReactMarkdown
                remarkPlugins={[remarkGfm]}
                components={{
                    // Personnaliser le rendu des éléments
                    h1: ({node, ...props}) => <h1 className="title" {...props} />,
                    code: ({inline, className, children}) => (
                        inline
                            ? <code className="inline-code">{children}</code>
                            : <pre><code className={className}>{children}</code></pre>
                    )
                }}
            >
                {content}
            </ReactMarkdown>
        </article>
    );
}

export default BlogPost;

Vue.js — vue-markdown-render

// Installation
npm install vue-markdown-render

// Composant Vue
<template>
    <vue-markdown :source="markdownContent" />
</template>

<script setup>
import VueMarkdown from 'vue-markdown-render';
import { ref } from 'vue';

const markdownContent = ref(`
# Mon titre

Contenu en **Markdown** avec _italique_.
`);
</script>

FAQ — Questions fréquentes

Le convertisseur envoie-t-il mes données à un serveur ?

Non. La conversion se fait entièrement dans votre navigateur via JavaScript. Aucune donnée n'est transmise. Vous pouvez même l'utiliser hors-ligne une fois la page chargée.

Quelles extensions Markdown sont supportées ?

Le convertisseur supporte la spécification CommonMark ainsi que les extensions GFM (GitHub Flavored Markdown) les plus utilisées : tableaux, code fencé avec langage, barré (~~texte~~), liens auto, listes imbriquées. Les footnotes et les définitions ne sont pas encore supportées.

Comment obtenir de la coloration syntaxique dans les blocs de code ?

Ce convertisseur génère des balises <code class="language-js"> avec la classe de langage. Pour activer la coloration, ajoutez Prism.js ou highlight.js à votre page HTML :

<!-- Highlight.js via CDN -->
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/highlight.js@11/styles/github-dark.min.css">
<script src="https://cdn.jsdelivr.net/npm/highlight.js@11/lib/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

Le HTML généré est-il sécurisé ?

Pour afficher du HTML d'origine inconnue dans votre application, utilisez toujours DOMPurify pour neutraliser les scripts malveillants. Si c'est votre propre contenu Markdown, le HTML généré est sûr — aucun script n'est injecté.

Puis-je utiliser ce parseur dans mon propre projet ?

Le code JavaScript de ce convertisseur est open-source. Pour un usage en production avec des besoins avancés (footnotes, TOC auto, custom renderers), préférez marked.js, markdown-it ou remark qui sont des projets matures et maintenus par la communauté.

Quelle est la différence entre Markdown et MDX ?

MDX est une extension de Markdown qui permet d'intégrer des composants JSX (React) directement dans les fichiers .mdx. C'est la solution utilisée par Next.js, Docusaurus, et Astro pour créer de la documentation interactive. Ce convertisseur traite uniquement le Markdown standard — pour MDX, utilisez la chaîne @mdx-js/mdx.

Comment gérer les caractères spéciaux HTML dans le Markdown ?

Le convertisseur échappe automatiquement les caractères <, >, & et " dans les blocs de code. Pour le texte normal, Markdown supporte les entités HTML directement : ©, €, etc.

Le convertisseur supporte-t-il le dark mode ?

Oui — l'interface adapte automatiquement ses couleurs selon le thème sélectionné sur AngularForAll (clair ou sombre), via les variables CSS data-theme.