Split view : zone de texte à gauche, prévisualisation à droite
Rendu markdown temps réel à chaque frappe
Coloration syntaxique des blocs de code (highlight.js), fond sombre type VSCode
HTML sanitisé avant injection (DOMPurify)
Sauvegarde automatique dans le localStorage (restaurée au rechargement)
Bouton copier le markdown ou le HTML (feedback visuel vert)
Bouton télécharger le contenu en download.md
Bouton effacer tout le contenu
Thème clair/sombre persistable, transition douce 350ms
Responsive jusqu'au mobile (panneaux empilés sous 768px)

Stack technique

Couche	Technologie
Framework	React 19 + Vite 8
Langage	TypeScript ~6.0 (ESM)
Styling	Tailwind CSS 4 (plugin `@tailwindcss/vite`)
Markdown	marked 18 + marked-highlight 2
Coloration	highlight.js 11
Sanitisation	DOMPurify 3
Linter	oxlint
Package manager	pnpm

Prérequis

Node.js ≥ 20
pnpm ≥ 9 (ou utiliser npx si absent)

Installation

# 1. Cloner et entrer dans le projet
git clone <url-du-repo> md-poc
cd md-poc

# 2. Installer les dépendances
pnpm install

# 3. Lancer le serveur de développement
pnpm dev

Ouvrir http://localhost:5173.

Scripts

Commande	Description
`pnpm dev`	Serveur de développement (HMR)
`pnpm build`	Typecheck + build de production dans `dist/`
`pnpm lint`	Lint oxlint
`pnpm preview`	Prévisualise le build de production

Structure du projet

src/
  App.tsx                 # Orchestrateur : état markdown, parsing, handlers
  main.tsx                # Entry point React
  index.css               # Tailwind + variables de thème + styles markdown/hljs
  types/types.ts          # Types et interfaces partagés
  hooks/
    useTheme.ts           # Thème + persistance + data-theme
  components/
    Header.tsx            # Barre supérieure (titre, actions, toggle thème)
    CopyButton.tsx        # Bouton copie avec feedback "Copié !"
    EditorInput.tsx       # Textarea markdown
    Preview.tsx           # Prévisualisation HTML sanitisé
    ThemeToggle.tsx       # Bouton lune/soleil
  utils/
    download.ts           # Téléchargement download.md

Détails techniques

Rendu markdown

marked.use(markedHighlight(...)) configuré une fois en haut de App.tsx
Bloc de code avec langage inconnu → fallback plaintext
Le HTML généré passe toujours par DOMPurify.sanitize avant injection
Mémorisation du parse avec useMemo (pas de recalcul au changement de thème)

Thème

Variables CSS (+ surcharge [data-theme="dark"]), pas de classes dark:
useTheme persiste le choix sous la clé md-theme et pose data-theme sur <html>
Les blocs de code restent sombres quel que soit le thème
Transition 350ms avec support prefers-reduced-motion

Persistance

Contenu markdown : clé md-content (écrite à chaque frappe)

Licence

MIT — voir le fichier LICENSE.