Bloc de code

Le bloc de code est la visionneuse sombre autour de chaque exemple de code clôturé : un panneau au style Monokai avec coloration syntaxique Chroma et un bouton de copie dans le coin supérieur droit. On écrit un simple bloc clôturé; le crochet de rendu ajoute le cadre, la coloration et le bouton.

Chaque bloc de code clôturé du site est le composant en direct — l’exemple ci-dessous s’affiche dans la visionneuse sombre, bouton de copie compris :

markup:
  highlight:
    codeFences: true
    noClasses: true
    style: monokai

Quand l’utiliser#

• Blocs de code clôturés seulement : chaque clôture dans le contenu Markdown reçoit la visionneuse automatiquement et les pages n’ajoutent jamais l’enveloppe à la main
• Code, commandes et configuration sur plusieurs lignes qu’une lectrice ou un lecteur peut vouloir copier tels quels; les identifiants isolés restent des segments code en ligne
• Pas pour les diagrammes — une clôture mermaid contourne entièrement la visionneuse et passe par le chemin Mermaid
• Gardez le contenu en lecture seule : un bloc de code se lit et se copie, il n’accueille jamais de liens ni de contrôles

Implémentation#

```yaml
markup:
  highlight:
    style: monokai
```

<div class="code-block not-prose">
  <button class="copy-btn-inline code-block-copy" type="button" aria-label="Copier" title="Copier" data-copy-label="Copier" data-copied-label="Copié">
    <svg class="code-block-copy-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">…</svg>
    <span class="sr-only" aria-live="polite">Copier</span>
  </button>
  <div class="code-block-body" tabindex="0" role="region" aria-label="Code défilant">
    <pre><code>…code coloré…</code></pre>
  </div>
</div>

Le crochet de rendu est layouts/_default/_markup/render-codeblock.html : il enveloppe chaque clôture non Mermaid dans .code-block, ajoute le bouton de copie avec ses libellés i18n et colore le code avec transform.Highlight. La coloration suit la configuration markup.highlight du site — style: monokai avec noClasses: true, alors Chroma émet des styles en ligne et aucune feuille de style de coloration n’existe. Les règles .code-block dans assets/css/site.css fixent le fond #272822 et font de .code-block-body la zone de défilement horizontal; cette zone porte tabindex="0" et role="region" avec le libellé i18n codeBlockScrollRegion, pour que les personnes au clavier puissent l’atteindre et la faire défiler même quand le code ne contient aucun élément pouvant recevoir le focus. La copie passe par l’écouteur de clic au niveau du document dans assets/js/site.js, lié à .copy-btn-inline : il copie le texte du bloc par l’auxiliaire partagé copyText — le même chemin de repli vers le presse-papiers que le bouton Copier en Markdown —, retire le saut de ligne final et remplace le libellé masqué par Copié pendant 1,4 seconde.

Options#

Accessibilité#

• Le contrôle de copie est un <button type="button"> natif : clic, Entrée et Espace l’activent tous; il porte son nom en aria-label, un title identique et un span sr-only masqué, tandis que l’icône est aria-hidden="true"
• Le span sr-only porte aria-live="polite", alors le passage à Copié est annoncé par les lecteurs d’écran au lieu d’être seulement visuel
• Le bouton de copie et la zone de défilement sont les seuls arrêts de tabulation du bloc — .code-block-body porte tabindex="0" et role="region" pour que les personnes au clavier puissent atteindre et faire défiler du code large même sans élément pouvant recevoir le focus à l’intérieur
• Évitez de placer des liens ou d’autres éléments interactifs dans le contenu du code — le contrat de la visionneuse est du texte en lecture seule avec une seule action de copie