---
title: "Démo MDX : tous les composants"
description: "Vitrine complète des composants MDX du blog."
date: "2026-07-02T12:00:00.000Z"
updated: "2026-08-24T15:05:22.447Z"
locale: "fr"
canonical: "https://ninhache.fr/fr/blog/demo-mdx"
author: "Néo Almeida"
tags: "mdx, demo"
categories: "dev"
---

# Démo MDX : tous les composants

Cette page de démonstration montre tous les composants MDX du blog, groupés par famille. Chaque bloc apparaît en fondu au défilement, dans la DA du site.

## Inline

On peut souligner en pointillés, en points, en vague, en bleu, ou surligner voire en violet. Un terme : ΔE (Delta E : distance perceptuelle entre deux couleurs). Statuts : résolu à revoir à surveiller. Grammaire : [#N] [$C$D#P] {[COND]?a:b} |expr|. Quiz : 175901/175901. Lien externe auto : [le projet timelife](https://timelife.aymeric.lefeyer.fr/), ou forcé : [ninhache.fr](https://ninhache.fr). Un aparté en marge (Détail appris en marchant dedans.) illustre le style Tufte.

---

## Callouts

**Note**

Note standard.

**Info**

Information utile.

**Tip**

Astuce pratique.

**Warning**

Avertissement.

**Danger**

Erreur à éviter.

**Piège**

Le piège aurait été de lire le buffer côté client.

**Leçon**

Toujours vérifier une hypothèse contre le cas qui l'a fait naître.

**Tip**

Les directives historiques marchent toujours.

## Structure : Takeaways, Specs, Card + Grid

- Le format binaire est positionnel : un octet mal lu décale tout.
- La couleur perçue n'est pas la couleur numérique.
- Rejouer byte-exact tranche entre deux candidats.

**Version**

4.2.1

**Taille du dump**

341 Ko

**Entrées décodées**

<code>175901 / 175901</code>

**Serveur**

Lecture du buffer côté back, format binaire brut.

**Client**

Rendu des tooltips à partir de la grammaire résolue.

**Pipelines et comparaisons**

## Steps

**Détecter la dérive**

On repère que le format a changé.

**Rejouer les candidats**

On teste chaque hypothèse byte-exact.

**Épingler le gagnant**

Le candidat qui décode tout est retenu.

## Compare

**v1 (cassé)**

La couleur était rejouée par pixel.

**v2 (réparé)**

La couleur est aplatie une fois par shape.

## Code annoté

```ts title="decode.ts" {3} showLineNumbers
function decode(buf: Buffer) {
  const header = buf.readUInt16LE(0);
  const version = buf.readUInt8(2);
  return { header, version };
}
```

```ts title="fix.ts"
const dmg = base + level; // [!code --]
const dmg = base + level * ratio; // [!code ++]
render(dmg); // [!code focus]
```

**Visualisations**

## HexDump

_En-tête binaire : survole un champ._

## Couleur : Swatch + DeltaE

**Cyan DA**

## Tables

| Tier | Risque | Action |
|---|---|---|
| Vert | faible | ok |
| Rouge | élevé | bloquer |

## Graphes

_Barres_

_Ligne_

## Figure, Details, Timeline

![Une image légendée](https://picsum.photos/seed/mdxdemo/1000/560)

**Voir la preuve (gros bloc)**

Le JSON de schéma faisait 341 Ko ; on le replie ici pour garder la page respirable.

**2019 - Jeu live**

Le format binaire est observé en production.

**2022 - Rétro-ingénierie**

On reconstruit la grammaire des tooltips.

**2026 - Web-app**

L'écosystème devient une application web.

---

Fin de la démo.

## Mise en page

**Chapitre - Une grande partie**

_Un en-tête de section centré façon DA, avec sur-titre et sous-titre._

_Image à gauche_

Le texte se place à droite de l'image. On peut mettre **plusieurs paragraphes** et des listes :

- premier point
- deuxième point

_Image à droite_

Ici l'image passe à droite via `side="right"`, le texte à gauche. En mobile, tout s'empile proprement.

Une ligne centrée, façon respiration.

![Une image élargie qui déborde la colonne de texte sur grand écran.](https://picsum.photos/seed/wide/1600/700)

**Partie II - Un bandeau d'ouverture**

_Pour ouvrir une grande section avec du souffle._