stnd.buildSTANDARD MANUAL2026-07-15

Système de Directives Typographiques (::syntax)

Système de Directives Typographiques (::syntax)

Le système ::syntax fournit une notation simple et lisible pour concevoir des mises en page complexes directement dans vos fichiers Markdown. Inspiré de la syntaxe des callouts d’Obsidian et du modèle de composants MDX, il relie le texte brut et les structures HTML avancées.

Philosophie

« Le balisage doit être lisible par les humains, pas seulement par les machines. » — Tim Berners-Lee

Le système ::syntax repose sur trois principes :

  1. Minimal — Modifier le moins de lignes possible pour obtenir des mises en page riches.
  2. Lisible — Les modèles sont auto-documentés et intuitifs.
  3. Composable — Les structures peuvent être imbriquées et combinées naturellement.

Types de Motifs

1. Paragraphes Intelligents (Smart Paragraphs)

Directives sur une seule ligne qui s’appliquent automatiquement au paragraphe suivant (sans avoir besoin de ::end).

<div class="hero">

Ce paragraphe s'affichera avec une typographie de taille "hero" (très grande).

Disponible :

2. Directives Inline

Directives courtes s’appliquant sur une seule ligne avec un contenu immédiat.

<aside class="note">Ceci est un rappel important pour plus tard.</aside>

Disponible :

3. Blocs Complexes

Conteneurs multi-lignes délimités par une directive d’ouverture et une ligne ::end. Idéal pour les mises en page complexes.

<div class="callout" data-callout="tip">
<div class="callout-title">
<span class="callout-icon">💡</span>
<span class="callout-title-inner">Tip</span>
</div>
<div class="callout-content">

Ceci est un conseil très utile qui peut s'étendre sur plusieurs lignes.
Vous pouvez utiliser du **Markdown** à l'intérieur.

</div>
</div>

Blocs Intégrés

Callouts (Style Obsidian)

<div class="callout" data-callout="note">
<div class="callout-title">
<span class="callout-icon">📝</span>
<span class="callout-title-inner">Note</span>
</div>
<div class="callout-content">

Callout standard avec style de note.

</div>
</div>


<details class="callout" data-callout="tip" open>
<summary class="callout-title">
<span class="callout-icon">💡</span>
<span class="callout-title-inner">Tip</span>
</summary>
<div class="callout-content">

Callout pliable ouvert par défaut (+ indicateur).

</div>
</details>


<details class="callout" data-callout="warning">
<summary class="callout-title">
<span class="callout-icon">⚠️</span>
<span class="callout-title-inner">Warning</span>
</summary>
<div class="callout-content">

Callout pliable fermé par défaut (- indicateur).

</div>
</details>

Types de Callouts supportés :

Blocs de mise en page (Grilles et colonnes)

Utilisez des séparateurs --- sur une ligne vide pour diviser le contenu d’un bloc en plusieurs colonnes ou cellules.

Colonnes équitables (::columns)

<div class="columns-2">
<div class="column">

Contenu de la colonne de gauche.

</div>
<div class="column">

Contenu de la colonne de droite.

</div>
</div>

Grille de cartes (::cards)

<div class="grid-3">
<div class="sm:row card">

### Carte 1
Description de la première carte.

</div>
<div class="sm:row card">

### Carte 2
Description de la deuxième carte.

</div>
<div class="sm:row card">

### Carte 3
Description de la troisième carte.

</div>
</div>

Grille générique (::grid)

<div class="grid-3">
<div class="sm:row">

Premier élément de la grille.

</div>
<div class="sm:row">

Deuxième élément de la grille.

</div>
<div class="sm:row">

Troisième élément de la grille.

</div>
</div>

Disposition asymétrique (::split)

<div class="grid">
<div class="sm:row col-8">

Contenu principal (prend 8/12e de la largeur).

</div>
<div class="sm:row col-4">

Barre latérale (prend 4/12e de la largeur).

</div>
</div>

Galerie d’images

<div class="gallery grid gap-4">
  <div class="col-12 md:col-6">
    <img src="https://images.unsplash.com/photo-1" alt="">
  </div>
  <div class="col-12 md:col-6">
    <img src="https://images.unsplash.com/photo-2" alt="">
  </div>
</div>

Boutons cliquables

<a href="https://standard.garden" class="button button-primary">Visiter le site</a>

Prévisualisation de Formulaire

<div stnd-preserve="1"></div>

Intégration Technique