Le bloc Code montre un extrait de code coloré sur une page. Un bouton le copie et, si vous lui donnez un nom, un autre bouton le télécharge. Cette page décrit ses réglages, la coloration de ses trois langages et ses boutons.
Ajouter un extrait de code
- Dans l’éditeur, ouvrez l’inserteur et choisissez Code. Ajouter un bloc détaille les façons d’insérer un bloc.
- Tapez ou collez votre code. Les retours à la ligne et l’indentation sont gardés.
- Dans l’onglet Réglages, panneau Code, choisissez le Langage et, pour proposer le téléchargement, un Nom du fichier.
| Réglage | Effet | Valeur par défaut |
|---|---|---|
| Langage | Le langage de l’extrait, pour la coloration : Texte brut, CSS, JSON ou Shell. | Texte brut |
| Nom du fichier | Le nom sous lequel le visiteur télécharge l’extrait, par exemple carte-produit.json. Vide, la page ne propose pas de téléchargement. | Vide |
Le panneau Avancé contient le champ Ancre HTML, pour pointer l’extrait avec une adresse terminée par #.
La coloration
Sur la page publiée, les chaînes, les commentaires, les mots-clés et les nombres prennent chacun leur couleur. Le reste garde la couleur du texte du bloc. La couleur est posée par le serveur : l’extrait arrive coloré et n’attend aucun script.
| Langage | Éléments colorés |
|---|---|
| CSS | Les commentaires /* … */, les chaînes, les règles comme @media et !important, les nombres avec leur unité (1.5rem, 50%) et les couleurs hexadécimales (#fff). |
| JSON | Les chaînes, clés comprises, true, false, null et les nombres. |
| Shell | Les commentaires # …, les chaînes, les mots réservés (if, for, export…) et les nombres. |
Les couleurs suivent le mode clair ou sombre de la page. Si vous donnez un fond au bloc, donnez-lui sa variante sombre avec Mode clair / sombre dans le panneau Couleurs.
Les boutons de l’extrait
| Bouton | Présence | Effet |
|---|---|---|
| Copier | Toujours. | Copie le code seul, sans les couleurs, dans le presse-papiers. Le bouton affiche une coche pendant deux secondes. |
| Télécharger | Quand Nom du fichier est rempli. | Télécharge l’extrait sous ce nom. |
Les boutons sont posés sur une ligne au-dessus du code : ils ne recouvrent jamais l’extrait. Le type du fichier téléchargé se déduit de son extension : .css, .json, .sh, .js, .html, .xml, .svg, .md ou .csv. Une autre extension donne un fichier texte.
Onglet Styles
Le bloc se règle dans les états Par défaut, Survol et Actif. Il reçoit les styles enregistrés.
| Panneau | Guide |
|---|---|
| Couleurs | Colorer un bloc |
| Typographie | Mettre en forme un texte |
| Taille et espacement, Bordures, Effets, Transitions | Régler la taille, les bordures et les effets |
Onglet Animations
L’onglet Animations fait apparaître l’extrait. Animer un bloc décrit les effets.
Sur téléphone
Une ligne plus longue que le bloc ne l’élargit pas : l’extrait défile sur le côté.
Accessibilité
- Les lecteurs d’écran annoncent le bouton de copie Copier le code. Une fois la copie faite, ils annoncent Code copié., ou Le code n’a pas pu être copié. si le navigateur la refuse.
- Ils annoncent le bouton de téléchargement avec le nom du fichier, par exemple « Télécharger carte-produit.json ».
Limites
- Seuls le CSS, le JSON et le shell sont colorés. Un autre langage s’affiche en texte brut.
- Le code est toujours affiché comme du texte : un shortcode comme
s’affiche tel quel. - Le nom du fichier est un nom seul, sans dossier.