CodeBlock
Code avec couleurs et le bouton Copier, dans sa propre barre qui nomme la langue.
Sur cette page
Playground
<button type="button" class="feitio-button" data-variant="primary">
Salvar alterações
</button>Langage
Fond
<div class="feitio-code" data-lang="html"><div class="bar"><span>HTML</span><button type="button" class="feitio-button copy" data-size="small" data-done-label="Copié">Copier</button></div><pre tabindex="0"><code><button type="button" class="feitio-button" data-variant="primary">
Salvar alterações
</button></code></pre></div>Quand l'utiliser
- Pour chaque extrait de code que la personne lira ou copiera : un exemple, une commande, une configuration.
Quand ne pas l'utiliser
- Pour un nom au sein d'une phrase (
data-size) : code en ligne, sans bloc.
Exemples
<button type="submit" class="feitio-button" data-variant="primary">
Salvar alterações
</button>HTML
Les couleurs proviennent des rôles de Feitio : la balise en texte orange, l'attribut en moussé, la valeur en encre. Copie affiche "Copié" sur le bouton lui-même et copie du texte brut.
Afficher le code
<div class="feitio-code" data-lang="html">
<div class="bar"><span>HTML</span><button type="button" class="feitio-button copy" data-size="small">Copiar</button></div>
<pre><code>…</code></pre>
</div>npm install @made-by-maid/feitiopnpm add @made-by-maid/feitioyarn add @made-by-maid/feitiobun add @made-by-maid/feitioAvec le gestionnaire de paquets
Pour les commandes d'installation, la barre propose npm, pnpm, yarn et bun ; le choix s'applique sur tout le site et est mémorisé.
Afficher le code
<div class="feitio-code" data-lang="shell">
<div class="bar"><span class="feitio-segmented" role="group" aria-label="Gerenciador de pacotes">…</span>…</div>
<pre data-pm="npm"><code>npm install @made-by-maid/feitio</code></pre>
<pre data-pm="pnpm" hidden>…</pre>
</div>Anatomie
<a href="/">- Bar: le langage, ou le choix du gestionnaire de paquets.
- Copier: petit, à la fin de la barre ; indique « Copié » à sa place.
- Le code, dans les couleurs du rôle.
Accessibilité
- Le bloc défile latéralement tout seul ; la page ne le fait jamais.
- « Copié » apparaît sur le bouton, là où se trouve l'œil et le focus.
Attributs
| Attribut | Valeurs | Pour quoi |
|---|---|---|
class="feitio-code" | obligatoire | Le bloc. |
data-lang | "html", "jsx", "css", "shell" | Quelles couleurs ; HTML et JSX obtiennent des couleurs de balles. |
class="copy" | le bouton | Copie du texte brut. |
data-pm | sur chaque <pre> | Une commande par gestionnaire de paquets. |