pagemark/md/pages/exemple-article.md

::Titre:Exemple d'article — toutes les fonctionnalités ::Date:01/01/2026 ::Auteur:Votre Nom ::Categories:Blog ::Image:/images/cover.jpg

Ceci est un article d'exemple montrant toutes les fonctionnalités disponibles dans PageMark. Supprimez ce fichier quand vous n'en avez plus besoin.

Métadonnées

Les métadonnées se placent en tête de fichier avec la syntaxe ::Clé:Valeur. Elles définissent le titre, la date, l'auteur et la catégorie de l'article.

Mise en forme du texte

Le texte supporte toute la syntaxe Markdown :

• Gras avec **texte**
• Italique avec *texte*
• Barré avec ~~texte~~
• Code inline avec des backticks
• Lien avec [texte](url)

Titres et ancres

Les titres h1 à h4 génèrent automatiquement une ancre cliquable # au survol, permettant de créer des liens directs vers une section :

https://monsite.com/exemple-article#images

Niveau 3

Niveau 4

Images

Placez vos images dans md/images/ et insérez-les ainsi :

![Description de l'image](/images/photo.jpg)

L'image de couverture (affichée dans les cards de la page d'accueil) se définit avec ::Image:/images/cover.jpg.

Blocs de code

Les blocs de code supportent la coloration syntaxique pour la plupart des langages :

def saluer(nom: str) -> str:
    return f"Bonjour, {nom} !"

print(saluer("PageMark"))

# Générer le site
python3 build.py

# Test local
python3 -m http.server 3000

document.addEventListener("DOMContentLoaded", () => {
  console.log("PageMark chargé !");
});

Tableaux

Fonctionnalité	Syntaxe	Résultat
Titre	::Titre:Mon titre	h1 avant l'article
Date	::Date:dd/mm/YYYY	Tri chronologique
Catégorie	::Categories:A-B	Dossier a/b/
Image couverture	::Image:/img/x.jpg	Card sur l'accueil

Citations

Les blockquotes s'écrivent avec > en début de ligne. Elles peuvent s'étendre sur plusieurs lignes.

HTML personnalisé

Vous pouvez insérer du HTML directement dans le Markdown — utile pour des mises en forme avancées, des iframes, des widgets, etc.

Astuce : utilisez les variables CSS var(--accent), var(--bg), var(--text), etc. pour que votre HTML s'adapte automatiquement au dark mode.

Listes

Liste non ordonnée :

• Élément A
• Élément B
  • Sous-élément
  • Sous-élément

Liste ordonnée :

1. Première étape
2. Deuxième étape
3. Troisième étape

Liste de tâches :

• Tâche terminée
• Tâche en cours
• Tâche à faire