# Code

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

1. Dans l’éditeur, ouvrez l’inserteur et choisissez **Code**. [Ajouter un bloc](https://lovelyrender.com/fr/documentation/ajouter-un-bloc/) détaille les façons d’insérer un bloc.
2. Tapez ou collez votre code. Les retours à la ligne et l’indentation sont gardés.
3. 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 |

![L’inspecteur d’un bloc Code : le panneau Code avec Langage sur CSS et son aide, puis Nom du fichier rempli avec carte.css.](https://static.lovelyrender.com/uploads/2026/10/898-doc-blocs-code.png)

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**.

**Remarque :** Un extrait dont vous avez mis un passage en forme (un mot en gras ou un lien) n’est pas coloré. Votre mise en forme est gardée telle quelle.

## 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.

**Conseil :** Pour un bloc prêt à importer, réglez le **Langage** sur **JSON** et nommez le fichier, par exemple `carte-produit.json`. Pour une commande à lancer, réglez **Shell** sans nom de fichier : le lecteur n’a que le bouton de copie.

## 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](https://lovelyrender.com/fr/documentation/couleurs-d-un-bloc/) |
| **Typographie** | [Mettre en forme un texte](https://lovelyrender.com/fr/documentation/typographie/) |
| **Taille et espacement**, **Bordures**, **Effets**, **Transitions** | [Régler la taille, les bordures et les effets](https://lovelyrender.com/fr/documentation/taille-bordures-effets/) |

## Onglet Animations

L’onglet **Animations** fait apparaître l’extrait. [Animer un bloc](https://lovelyrender.com/fr/documentation/animations/) 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.

## Voir aussi

- [Texte](https://lovelyrender.com/fr/documentation/bloc-texte/)
- [Colorer un bloc](https://lovelyrender.com/fr/documentation/couleurs-d-un-bloc/)
- [Ajouter du CSS avancé](https://lovelyrender.com/fr/documentation/css-avance/)