themuslimarketer
← Tous les articles

Démo en bien

Test

3 min de lecture

title: Démo — toute la syntaxe Markdown du blog slug: demo-syntaxe-markdown excerpt: Un article-test qui montre chaque élément supporté par l'éditeur. Copiez-collez-le pour vérifier le rendu. category: Skills status: draft

Cet article est un terrain de jeu. Chaque section ci-dessous illustre une syntaxe disponible dans l'éditeur. Le rendu doit correspondre à ce que vous voyez ici.

Hiérarchie des titres

Les ## sont les chapitres. Ils nourrissent le sommaire à droite. Les ### sont des sous-points, indentés en arborescence.

Sous-titre un

Un H3 sous un H2. Visible dans le sommaire avec un connecteur ├─.

Sous-titre deux

Deuxième sous-titre pour vérifier que le tree continue.

Sous-titre trois

Dernier de la section. Marqué avec └ dans le sommaire.

Texte courant et inline

Voici un paragraphe normal. Vous pouvez mettre du gras pour insister, de l'italique pour nuancer, et du code inline pour citer une fonction.

Vous pouvez combiner : un mot gras avec du code dedans, ou italique avec un lien au milieu.

Citations

« Le bon design est aussi peu de design que possible. » — Dieter Rams

Callouts (encadrés)

Cinq variantes, avec ou sans titre personnalisé.

Information neutre. Utile pour préciser un contexte sans alerter.

Une astuce concrète, un raccourci, un truc qui fait gagner du temps.

Quelque chose à surveiller — une limite, une dépendance, un piège classique.

Action destructive ou perte de données possible. Lisez avant d'agir.

Vous pouvez ajouter un titre personnalisé avec :::note{title="Mon titre"}.

Collapsibles (replier / déplier)

Idéal pour les FAQ, les détails techniques, les exemples longs.

Cliquez pour déplier — exemple simple

Tout ce contenu est caché par défaut. Il peut contenir paragraphes, listes, blocs de code, images, autres composants Markdown.

const masque = "ouvert au clic";
Un autre exemple, indépendant du précédent

Celui-ci s'ouvre indépendamment.

Groupe accordion — un seul ouvert à la fois

Ajoutez name="mon-groupe" sur plusieurs <details> pour qu'ils se ferment entre eux automatiquement (HTML natif, zéro JavaScript).

Question 1 — pourquoi Markdown ?

Markdown est lisible en source, portable, versionnable, et se rend en HTML propre sans dépendance lourde.

Question 2 — et les images ?

Utilisez le bouton Insérer une image dans l'éditeur, ou collez ![alt](url) à la main.

Question 3 — puis-je mettre du HTML ?

Oui — <details>, <summary>, <kbd>, <sub>, <sup> fonctionnent nativement.

Listes

Liste à puces

  • Premier élément
  • Deuxième élément
  • Troisième élément

Liste numérotée

  1. Une étape
  2. Une autre étape
  3. Une dernière étape

Liste imbriquée

  • Niveau un
    • Niveau deux
      • Niveau trois
  • Retour niveau un

Blocs de code

interface User {
  id: string;
  email: string;
}

export async function fetchUser(id: string): Promise<User | null> {
  const res = await fetch(`/api/users/${id}`);
  if (!res.ok) return null;
  return res.json();
}

npm install gsap @gsap/react
npx supabase db push

Tableaux

ÉlémentSyntaxeRendu
Gras**texte**texte
Italique*texte*texte
Code inline`code`code
Callout:::info ... :::voir plus haut
Collapsible<details><summary>voir plus haut

Touches de clavier

Appuyez sur Ctrl + K pour ouvrir la recherche.

Liens et navigation

Séparateur horizontal

Et après. Utile pour casser visuellement entre deux idées.

Cet article peut être supprimé après lecture. Il sert uniquement de référence visuelle.

© 2026 themuslimarketer