# Un bouton « copier le code » sur vos blocs, sans bibliothèque lourde

> Ajouter un petit bouton fonctionnel au-dessus des blocs de code d'un article technique, en JavaScript natif minimal, sans dépendance externe.

- Auteur : Clément Hadrot
- Publié le : 2022-05-25
- Mis à jour le : 2022-05-25
- Catégorie : Tips
- URL : https://wpmoderne.dev.wordpress-developpement.fr/tips/bouton-copier-code-blocs-sans-bibliotheque/

## L’essentiel

- L'API Clipboard native suffit largement pour ce besoin
- Aucune bibliothèque tierce n'est nécessaire
- Le script cible directement les balises pre code générées par Gutenberg

En rédigeant un tutoriel technique un peu long sur une extension métier pour un client du secteur de la formation à distance, la question a fini par se poser d'elle-même : comment permettre à un lecteur de copier un extrait de code sans devoir le sélectionner manuellement à la souris, opération toujours un peu hasardeuse sur mobile. La réponse la plus simple ne demandait ni bibliothèque JavaScript ni extension : l'API Clipboard, disponible nativement dans tous les navigateurs modernes, suffisait entièrement.

Voici comment ajouter ce bouton à tous les blocs de code d'un article, étape par étape, sans dépendance externe et avec un minimum de code à maintenir.

## Étape 1 : repérer les blocs concernés

Le bloc de code natif de Gutenberg génère une structure `<pre><code>...</code></pre>` simple. C'est cette structure qu'on cible directement en JavaScript, sans avoir besoin de modifier le contenu de l'article ni son enregistrement en base de données :

```
document.addEventListener( 'DOMContentLoaded', function () {
    var blocsDeCode = document.querySelectorAll( '.entry-content pre code' );

    blocsDeCode.forEach( function ( bloc ) {
        var conteneur = bloc.parentElement;
        conteneur.style.position = 'relative';

        var bouton = document.createElement( 'button' );
        bouton.type = 'button';
        bouton.className = 'bouton-copier-code';
        bouton.textContent = 'Copier';

        bouton.addEventListener( 'click', function () {
            copierLeCode( bloc, bouton );
        } );

        conteneur.appendChild( bouton );
    } );
} );
```

> L'essentiel à retenir : L'API Clipboard native suffit largement pour ce besoin ; Aucune bibliothèque tierce n'est nécessaire ; Le script cible directement les balises pre code générées par Gutenberg

## Étape 2 : la fonction de copie elle-même

L'API `navigator.clipboard.writeText()` renvoie une promesse, ce qui permet d'afficher une confirmation visuelle une fois la copie réussie, et de gérer proprement un éventuel refus du navigateur :

```
function copierLeCode( bloc, bouton ) {
    var texte = bloc.textContent;

    navigator.clipboard.writeText( texte ).then( function () {
        var libelleOriginal = bouton.textContent;
        bouton.textContent = 'Copié !';

        setTimeout( function () {
            bouton.textContent = libelleOriginal;
        }, 2000 );
    } ).catch( function () {
        bouton.textContent = 'Échec de la copie';
    } );
}
```

Le recours à `textContent` plutôt qu'à `innerHTML` garantit que le code copié correspond exactement au texte affiché, sans balises HTML résiduelles issues de la coloration syntaxique éventuellement appliquée par un thème ou une extension.

## Étape 3 : un minimum de style

```
.bouton-copier-code {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    font-size: 12px;
    border: none;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.15);
    color: inherit;
    cursor: pointer;
}

.bouton-copier-code:hover {
    background: rgba(255, 255, 255, 0.3);
}
```

## Le point d'attention : le contexte sécurisé

L'API Clipboard n'est disponible que dans un contexte sécurisé, c'est-à-dire servi en HTTPS, ou sur `localhost` en développement. Sur un environnement de recette encore accessible en HTTP simple, le bouton reste présent mais échoue systématiquement, sans message d'erreur explicite dans la console pour un développeur qui ne connaîtrait pas cette restriction.

- Vérifier que le certificat HTTPS est actif sur tous les environnements avant de considérer la fonctionnalité terminée.
- Prévoir un message de repli clair, plutôt qu'un échec silencieux, pour les rares navigateurs qui ne supportent pas encore l'API.
- Tester spécifiquement sur mobile, où le comportement de copie diffère parfois légèrement d'un navigateur à l'autre.

> Sur un blog technique, ce petit bouton change concrètement l'expérience de lecture : un lecteur qui doit sélectionner du code à la main sur mobile abandonne souvent avant même d'avoir terminé.

## En résumé

Une quinzaine de lignes de JavaScript natif, appuyées sur l'API Clipboard, suffisent à ajouter un bouton de copie fonctionnel sur tous les blocs de code d'un article, sans bibliothèque tierce ni impact sur le poids de la page. Ce script reste indépendant de tout style de bloc personnalisé plus large, qui relève d'un travail distinct côté éditeur.