112 lines
2.9 KiB
Markdown
112 lines
2.9 KiB
Markdown
::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](https://example.com) 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 :
|
|
|
|
```markdown
|
|
|
|
```
|
|
|
|
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 :
|
|
|
|
```python
|
|
def saluer(nom: str) -> str:
|
|
return f"Bonjour, {nom} !"
|
|
|
|
print(saluer("PageMark"))
|
|
```
|
|
|
|
```bash
|
|
# Générer le site
|
|
python3 build.py
|
|
|
|
# Test local
|
|
python3 -m http.server 3000
|
|
```
|
|
|
|
```javascript
|
|
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.
|
|
|
|
<div style="background: var(--accent-soft); border-left: 3px solid var(--accent); padding: 1rem 1.4rem; border-radius: 0 8px 8px 0; margin: 1.5rem 0;">
|
|
<strong>Astuce :</strong> utilisez les variables CSS <code>var(--accent)</code>, <code>var(--bg)</code>, <code>var(--text)</code>, etc. pour que votre HTML s'adapte automatiquement au dark mode.
|
|
</div>
|
|
|
|
## 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 :
|
|
|
|
- [x] Tâche terminée
|
|
- [ ] Tâche en cours
|
|
- [ ] Tâche à faire
|