MDViewer

Démo de syntaxe Markdown

2026-07-27 2610 mots 13 min de lecture

Une page couvrant toute la syntaxe Markdown et toutes les capacités visuelles prises en charge par MDViewer : formules, tableaux, diagrammes, coloration syntaxique, encadrés, notes de bas de page, etc.

SyntaxeDémoMermaidKaTeX

Cette page montre tout ce que MDViewer sait rendre. Considérez-la comme une liste de contrôle du rendu : chaque bloc ci-dessous doit apparaître mis en forme, et non sous forme de symboles bruts.

Astuce

Téléchargez ce fichier et ouvrez-le avec le lecteur de la page d’accueil : vous obtiendrez exactement le même rendu.

1. Texte et mise en forme en ligne

Un paragraphe ordinaire. Gras, italique, gras italique, barré, insertion soulignée, surligné, code en ligne.

Indice et exposant : H2O, E = mc2, le 42e élément.

Un lien en ligne vers la spécification CommonMark , un lien automatique https://developer.mozilla.org/ et un lien interne .

Les abréviations affichent leur forme complète au survol : HTML et CSS sont les bases du front-end.

*[HTML]: HyperText Markup Language *[CSS]: Cascading Style Sheets

Émoji : 🚀 ✨ 📚 ✅ ⚠️

Retour à la ligne forcé avec deux espaces en fin de ligne : cette ligne appartient au même paragraphe que la précédente.

Afficher le Markdown Masquer le Markdown 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

Un paragraphe ordinaire. **Gras**, *italique*, ***gras italique***, ~~barré~~, ++insertion soulignée++, ==surligné==, `code en ligne`.

Indice et exposant : H~2~O, E = mc^2^, le 42^e^ élément.

Un lien en ligne vers la [spécification CommonMark](https://commonmark.org/), un lien automatique <https://developer.mozilla.org/> et un [lien interne](../quick-start/).

Les abréviations affichent leur forme complète au survol : HTML et CSS sont les bases du front-end.

*[HTML]: HyperText Markup Language
*[CSS]: Cascading Style Sheets

Émoji : :rocket: :sparkles: :books: :white_check_mark: :warning:

Retour à la ligne forcé avec deux espaces en fin de ligne :
cette ligne appartient au même paragraphe que la précédente.

2. Niveaux de titre

Les titres reçoivent automatiquement une ancre, le plan à droite y saute, et un lien # apparaît en fin de titre au survol.

Titre de niveau 3

Titre de niveau 4

Titre de niveau 5
Titre de niveau 6

3. Listes

Liste à puces

  • Premier élément
  • Deuxième élément
    • Deuxième niveau imbriqué
      • Troisième niveau imbriqué
  • Troisième élément
Afficher le Markdown Masquer le Markdown 
1
2
3
4
5

- Premier élément
- Deuxième élément
  - Deuxième niveau imbriqué
    - Troisième niveau imbriqué
- Troisième élément

Liste numérotée

  1. Préparer le contenu
  2. L’écrire en Markdown
    1. Rédiger le texte
    2. Prévisualiser au fil de l’eau
  3. Le publier
Afficher le Markdown Masquer le Markdown 
1
2
3
4
5

1. Préparer le contenu
2. L’écrire en Markdown
   1. Rédiger le texte
   2. Prévisualiser au fil de l’eau
3. Le publier

Liste de tâches

  • Listes de tâches GFM prises en charge
  • Les éléments terminés sont barrés
  • Un élément en cours
  • Imbrication prise en charge
    • Les sous-éléments se cochent aussi
    • Un sous-élément en cours
Afficher le Markdown Masquer le Markdown 
1
2
3
4
5
6

- [x] Listes de tâches GFM prises en charge
- [x] Les éléments terminés sont barrés
- [ ] Un élément en cours
- [ ] Imbrication prise en charge
  - [x] Les sous-éléments se cochent aussi
  - [ ] Un sous-élément en cours

Liste de définitions

Mermaid
Une syntaxe textuelle pour les diagrammes, rendue en organigrammes, séquences, etc.
Markdown
Un langage de balisage léger qui exprime la structure d’un texte en texte brut.
KaTeX
Une bibliothèque de composition mathématique qui rend les formules TeX dans le navigateur, très rapidement.
Afficher le Markdown Masquer le Markdown 
1
2
3
4
5
6
7
8

Mermaid
: Une syntaxe textuelle pour les diagrammes, rendue en organigrammes, séquences, etc.

Markdown
: Un langage de balisage léger qui exprime la structure d’un texte en texte brut.

KaTeX
: Une bibliothèque de composition mathématique qui rend les formules TeX dans le navigateur, très rapidement.

4. Citations et encadrés

Une citation ordinaire. Une citation peut contenir de la mise en forme en ligne, du code et plusieurs paragraphes.

Voici le deuxième paragraphe de la citation.

Une citation imbriquée.

Afficher le Markdown Masquer le Markdown 
1
2
3
4
5

> Une citation ordinaire. Une citation peut contenir de la **mise en forme en ligne**, du `code` et plusieurs paragraphes.
>
> Voici le deuxième paragraphe de la citation.
>
> > Une citation imbriquée.

Les encadrés au style GitHub sont rendus sous forme de cartes colorées avec icône :

Note

Une information générale qui apporte du contexte sans affecter le déroulement principal.

Astuce

Un conseil qui vous fait gagner du temps. Par exemple : appuyez sur ? pour voir tous les raccourcis.

Important

Une information indispensable pour mener la tâche à bien ; l’ignorer mène à l’échec.

Avertissement

Un point qui demande votre attention immédiate ; le négliger peut avoir des conséquences.

Attention

Une opération risquée : assurez-vous d’en comprendre les conséquences avant de la lancer.

Afficher le Markdown Masquer le Markdown 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

> [!NOTE]
> Une information générale qui apporte du contexte sans affecter le déroulement principal.

> [!TIP]
> Un conseil qui vous fait gagner du temps. Par exemple : appuyez sur <kbd>?</kbd> pour voir tous les raccourcis.

> [!IMPORTANT]
> Une information indispensable pour mener la tâche à bien ; l’ignorer mène à l’échec.

> [!WARNING]
> Un point qui demande votre attention immédiate ; le négliger peut avoir des conséquences.

> [!CAUTION]
> Une opération risquée : assurez-vous d’en comprendre les conséquences avant de la lancer.

5. Code

En ligne et en bloc

La commande d’installation est npm install ; le fichier de configuration est package.json.

1
2
3
4
5

# Trouver tous les fichiers Markdown du dossier
find . -name "*.md" -not -path "./node_modules/*"

# Additionner le nombre total de mots
wc -w $(find . -name "*.md") | tail -1

Coloration dans plusieurs langages 

1
2
3
4
5
6
7
8

import MarkdownIt from 'markdown-it';

const md = new MarkdownIt({ html: true, linkify: true });

export function render(source) {
  const { data, content } = parseFrontMatter(source);
  return { meta: data, html: md.render(content) };
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

from dataclasses import dataclass


@dataclass
class Document:
    path: str
    words: int

    @property
    def minutes(self) -> int:
        """Estime la durée de lecture à 450 caractères chinois par minute."""
        return max(1, round(self.words / 450))


docs = [Document("readme.md", 1280), Document("guide.md", 3400)]
print(sum(d.minutes for d in docs), "minutes")
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

package main

import (
	"fmt"
	"strings"
)

func Slugify(title string) string {
	return strings.ToLower(strings.ReplaceAll(title, " ", "-"))
}

func main() {
	fmt.Println(Slugify("Hello Markdown World"))
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

#[derive(Debug, Clone)]
pub struct Heading {
    pub level: u8,
    pub text: String,
}

impl Heading {
    pub fn anchor(&self) -> String {
        self.text.to_lowercase().replace(' ', "-")
    }
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10

SELECT d.path,
       COUNT(h.id) AS heading_count,
       SUM(d.words) AS total_words
FROM documents AS d
LEFT JOIN headings AS h ON h.doc_id = d.id
WHERE d.updated_at >= '2026-01-01'
GROUP BY d.path
HAVING COUNT(h.id) > 3
ORDER BY total_words DESC
LIMIT 20;
1
2
3
4
5
6
7
8

markup:
  goldmark:
    extensions:
      passthrough:
        enable: true
        delimiters:
          block: [["\\[", "\\]"], ["$$", "$$"]]
          inline: [["\\(", "\\)"], ["$", "$"]]
1
2
3
4
5

  function render(source) {
-   return marked(source);
+   const { data, content } = parseFrontMatter(source);
+   return md.render(content);
  }

Le coin supérieur droit d’un bloc de code propose les boutons copier, numéros de ligne et retour à la ligne ; les blocs de plus de 24 lignes se replient automatiquement.

6. Tableaux

La syntaxe d’alignement est prise en charge, les en-têtes trient au clic et les tableaux larges défilent horizontalement.

Fonction Moteur Poids Chargement
Analyse Markdown markdown-it 505 Ko Premier affichage
Coloration syntaxique highlight.js Dans le bundle principal Premier affichage
Formules mathématiques KaTeX 261 Ko À la demande
Diagrammes Mermaid 3,3 Mo À la demande
Recherche plein texte Fuse.js Dans le bundle principal Premier affichage
Afficher le Markdown Masquer le Markdown 
1
2
3
4
5
6
7

| Fonction | Moteur | Poids | Chargement |
|:---------|:------:|------:|:-----------|
| Analyse Markdown | markdown-it | 505 Ko | Premier affichage |
| Coloration syntaxique | highlight.js | Dans le bundle principal | Premier affichage |
| Formules mathématiques | KaTeX | 261 Ko | À la demande |
| Diagrammes | Mermaid | 3,3 Mo | À la demande |
| Recherche plein texte | Fuse.js | Dans le bundle principal | Premier affichage |

L’alignement à gauche, au centre et à droite s’écrit respectivement :---, :---: et ---:.

Un tableau au contenu riche

Syntaxe Écriture Résultat
Gras **texte** texte
Code `code` code
Formule $a^2+b^2$ $a^2+b^2$
Lien [nom](url) nom
Afficher le Markdown Masquer le Markdown 
1
2
3
4
5
6

| Syntaxe | Écriture | Résultat |
|---------|----------|----------|
| Gras | `**texte**` | **texte** |
| Code | `` `code` `` | `code` |
| Formule | `$a^2+b^2$` | $a^2+b^2$ |
| Lien | `[nom](url)` | [nom](https://example.com) |

7. Mathématiques

Formules en ligne

L’équivalence masse-énergie $E = mc^2$ comme l’identité d’Euler $e^{i\pi} + 1 = 0$ tiennent dans une phrase. Quand $n \to \infty$, $\sum_{k=1}^{n} \frac{1}{k^2} \to \frac{\pi^2}{6}$.

Afficher le Markdown Masquer le Markdown 
1

L’équivalence masse-énergie $E = mc^2$ comme l’identité d’Euler $e^{i\pi} + 1 = 0$ tiennent dans une phrase. Quand $n \to \infty$, $\sum_{k=1}^{n} \frac{1}{k^2} \to \frac{\pi^2}{6}$.

Formules en bloc

$$ \int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi} $$

Matrices

$$ A = \begin{pmatrix} a_{11} & a_{12} & \cdots & a_{1n} \\ a_{21} & a_{22} & \cdots & a_{2n} \\ \vdots & \vdots & \ddots & \vdots \\ a_{m1} & a_{m2} & \cdots & a_{mn} \end{pmatrix} $$

Alignement sur plusieurs lignes

$$ \begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\ \nabla \cdot \mathbf{B} &= 0 \\ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\ \nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \end{aligned} $$

Fonctions par morceaux et intégrales

$$ f(x) = \begin{cases} x^2 & \text{if } x \geq 0 \\ -x^2 & \text{if } x < 0 \end{cases} \qquad \hat{f}(\xi) = \int_{-\infty}^{\infty} f(x)\, e^{-2\pi i x \xi}\, dx $$

8. Diagrammes (Mermaid)

Les diagrammes changent de couleur avec le thème clair ou sombre ; au survol, le coin supérieur droit permet de copier la source ou de télécharger le SVG.

Diagramme de flux

Diagramme de séquence

Diagramme de classes

Diagramme d’états

Diagramme entité-association

Diagramme de Gantt

Camembert

Parcours utilisateur

Carte mentale

Graphe Git

9. Blocs repliables

Cliquez pour déplier : pourquoi le moteur de diagrammes est-il chargé à la demande ?

Une fois empaqueté, Mermaid pèse environ 3,3 Mo : c’est la plus grosse dépendance du projet. L’inclure dans le bundle principal obligerait chaque lecteur à le télécharger, même pour un document sans le moindre diagramme.

MDViewer sépare donc Mermaid et KaTeX dans des modules ES distincts et ne les récupère par import() dynamique que lorsqu’un bloc mermaid ou une formule apparaît réellement dans la page. Pour un document uniquement textuel, le premier affichage ne demande qu’environ 505 Ko.

Cliquez pour déplier : quels formats de front matter sont pris en charge ?

Les trois. Le lecteur les détecte et les affiche dans une carte repliable sous le titre du document :

  • YAML : encadré par ---, le plus courant
  • TOML : encadré par +++
  • JSON : encadré par { }

Les champs comme title, description, date, author et tags sont remontés dans l’en-tête du document et présentés séparément.

Afficher le Markdown Masquer le Markdown 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<details>
<summary>Cliquez pour déplier : pourquoi le moteur de diagrammes est-il chargé à la demande ?</summary>

Une fois empaqueté, Mermaid pèse environ 3,3 Mo : c’est la plus grosse dépendance du projet. L’inclure dans le bundle principal obligerait chaque lecteur à le télécharger, même pour un document sans le moindre diagramme.

MDViewer sépare donc Mermaid et KaTeX dans des modules ES distincts et ne les récupère par `import()` dynamique que lorsqu’un bloc `mermaid` ou une formule apparaît réellement dans la page. Pour un document uniquement textuel, le premier affichage ne demande qu’environ 505 Ko.

</details>

<details>
<summary>Cliquez pour déplier : quels formats de front matter sont pris en charge ?</summary>

Les trois. Le lecteur les détecte et les affiche dans une carte repliable sous le titre du document :

- **YAML** : encadré par `---`, le plus courant
- **TOML** : encadré par `+++`
- **JSON** : encadré par `{ }`

Les champs comme `title`, `description`, `date`, `author` et `tags` sont remontés dans l’en-tête du document et présentés séparément.

</details>

10. Notes de bas de page

Markdown est né en 20041 pour écrire du texte mis en forme dans des fichiers en clair. Aujourd’hui, la plupart des outils suivent la spécification CommonMark2, complétée par les extensions de GitHub3.

  1. Conçu par John Gruber avec Aaron Swartz, avec l’idée que le texte reste lisible avant même d’être rendu. ↩︎

  2. Une spécification précise publiée en 2014, qui a levé l’essentiel des ambiguïtés de la description d’origine. ↩︎

  3. Ajoute les tableaux, les listes de tâches, le texte barré et les liens automatiques — la syntaxe attendue par la plupart des gens aujourd’hui. ↩︎

Afficher le Markdown Masquer le Markdown 
1
2
3
4
5

Markdown est né en 2004[^origin] pour écrire du texte mis en forme dans des fichiers en clair. Aujourd’hui, la plupart des outils suivent la spécification CommonMark[^spec], complétée par les extensions de GitHub[^gfm].

[^origin]: Conçu par John Gruber avec Aaron Swartz, avec l’idée que le texte reste lisible avant même d’être rendu.
[^spec]: Une spécification précise publiée en 2014, qui a levé l’essentiel des ambiguïtés de la description d’origine.
[^gfm]: Ajoute les tableaux, les listes de tâches, le texte barré et les liens automatiques — la syntaxe attendue par la plupart des gens aujourd’hui.

11. Images

Les images s’agrandissent au clic, se zooment à la molette et se déplacent au glisser. Une image dotée d’un titre est rendue avec une légende centrée.

La vue de lecture à trois colonnes de MDViewer
Trois colonnes : arborescence à gauche, contenu au centre, plan à droite

12. HTML brut

Le HTML peut s’écrire directement dans le Markdown et est rendu tel quel :

Composant badge Écrit en HTML brut Ctrl + K
Afficher le Markdown Masquer le Markdown 
1
2
3
4
5
6

<div style="display:flex;gap:.75rem;flex-wrap:wrap;align-items:center">
  <span class="badge">Composant badge</span>
  <span class="badge">Écrit en HTML brut</span>
  <kbd>Ctrl</kbd> + <kbd>K</kbd>
  <progress value="72" max="100" style="width:8rem"></progress>
</div>

13. Échappements et caractères spéciaux

Échappements par barre oblique inverse : *pas d’italique*, `pas de code`, # pas un titre.

Entités HTML : © — … → ≤ ≠

Ponctuation et écritures mêlées : « guillemets français », “guillemets anglais”, tirets cadratins — et points de suspension…

Afficher le Markdown Masquer le Markdown 
1
2
3
4
5

Échappements par barre oblique inverse : \*pas d’italique\*, \`pas de code\`, \# pas un titre.

Entités HTML : &copy; &mdash; &hellip; &rarr; &le; &ne;

Ponctuation et écritures mêlées : « guillemets français », “guillemets anglais”, tirets cadratins — et points de suspension…

Liste de contrôle du rendu

Si tout ce qui suit correspond à ce que vous voyez, la chaîne de rendu fonctionne parfaitement :

  • Les titres ont une ancre, et le plan y saute en surlignant la position courante
  • Les blocs de code ont des couleurs, une étiquette de langage et un bouton de copie
  • Les tableaux ont des bordures et un zébrage au survol, et les en-têtes trient au clic
  • Les formules en ligne et en bloc sont composées comme des mathématiques, pas comme du LaTeX brut
  • Les dix diagrammes Mermaid apparaissent en graphiques vectoriels
  • Les encadrés s’affichent en cartes colorées avec icône
  • Les notes de bas de page renvoient dans les deux sens
  • Les images s’agrandissent au clic
  • Le passage en mode sombre recolore les diagrammes