Comment créer un bouton de copie d'extrait de code et pourquoi c'est important

Depuis 2025, je souffre du syndrome du canal carpien. Pour soulager la douleur, j'ai expérimenté l'utilisation de ma voix pour le codage, la navigation sur le Web et le travail sur ordinateur. Ce n’est pas facile, et il est difficile de comprendre à quel point la technologie peut être hostile aux personnes à mobilité réduite, à moins d’en faire l’expérience directe. Quiconque me connaît sait que j'ai toujours été un fervent partisan du Web accessible et des pratiques accessibles, mais c'était la première fois que je faisais l'expérience d'un mouvement limité de la main et je n'avais jamais réalisé qu'il faudrait un minimum d'effort de la part de l'utilisateur pour le faire. accomplir l'importance de la tâche.

Utiliser des commandes vocales pour mettre en évidence des blocs de code et les copier est extrêmement difficile, du moins pas possible pour moi pour le moment (soit vraiment impossible, soit je n'ai tout simplement pas encore trouvé de moyen de naviguer sur le Web et de coder sans la main). l'ordinateur demande beaucoup de matière grise). Par conséquent, lors de l'écriture sur le code, et en particulier lors de la création de didacticiels dans lesquels les lecteurs copient et collent du code, il est absolument nécessaire de fournir aux personnes ayant des mouvements de main limités un moyen de copier le code en un seul clic .

Avant de souffrir du syndrome du canal carpien, je pensais que le bouton de copie du code était redondant. Mais j'avais tort. Ainsi, l'une de mes premières tâches de codage basé sur la parole a été d'ajouter un bouton de copie de code à tous les extraits de code de mes articles de blog. Je travaille sur un autre article de blog sur mon parcours avec le codage vocal, mais si vous êtes intéressé, les outils que j'utilise sont Talon et Cursorless dans VSCode. Réapprendre à tout faire sur ordinateur avec la voix a été une courbe d'apprentissage abrupte, mais l'ensemble du processus m'a soulagé d'une partie de la douleur. Oui, j'ai écrit ce billet de blog vocalement autant que possible.

Ma solution de bouton de copie d'extrait a été écrite en HTML pur, CSS et JavaScript dans un projet Eleventy utilisant le moteur de modèles JavaScript (d'où l'utilisation de l'interpolation de chaînes avec des accolades).

HTML (et quelques JavaScript préliminaires pour créer du HTML)

Dans un article de blog sur le code, vous pouvez avoir plusieurs extraits de bloc de code sur une page. Par conséquent, vous devez attribuer à chaque bloc de code un identifiant unique afin de localiser le contenu correct à copier. Vous pouvez générer des identifiants uniques comme vous le souhaitez, par exemple en utilisant une bibliothèque externe, mais c'est ce que je fais pour chaque extrait au moment de la construction.

function makeId(length) {
  let result = "";
  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
  const charactersLength = characters.length;
  let counter = 0;
  while (counter < length) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
    counter += 1;
  }
  return result;
}

Étant donné que les blocs de code formatés et mis en évidence par la syntaxe contiendront des classes HTML et CSS supplémentaires pour améliorer le formatage et la mise en évidence, nous devons nous assurer que le bouton Copier copie uniquement le contenu du code d'origine dans le presse-papiers. Ma solution consistait à stocker la chaîne de code d'origine dans une balise méta pour une récupération facile en JavaScript (au lieu de supprimer les balises HTML redondantes ; même dans ce cas, nous ne voulons pas supprimer les balises HTML de l'extrait HTML !). Vous devez également utiliser `encodeURIComponent` lors du stockage des chaînes de code brut dans des balises méta afin que le code ne s'exécute pas sur la page (par exemple, du code JavaScript). Cette balise méta se trouve à côté de chaque bloc de code dans mes articles de blog.

<meta data-code-id="${thisCodeID}" data-code-to-copy="${encodeURIComponent(codeSnippet)}"></meta>

Ensuite, ajoutez un bouton à côté ou dans le bloc de code qui fait référence à l'identifiant unique que vous avez créé précédemment. J'ai également choisi d'ajouter une petite icône SVG de presse-papiers à côté du texte du bouton. Si vous choisissez d'omettre le texte du bouton et d'utiliser uniquement une icône, veillez à utiliser « aria-label » pour vous assurer que le bouton a un nom accessible que les technologies d'assistance (telles que les lecteurs d'écran) peuvent comprendre (par exemple, « Copier l'extrait » ).

Copier

Style CSS

Je ne vous dicterai pas comment styliser ce bouton de copie dans vos propres articles de blog, mais j'ai choisi de le positionner absolument dans le coin supérieur droit de chaque bloc de code. Assurez-vous d'inclure des styles ciblés, actifs et visibles sur vos boutons pour garantir que ceux qui lisent votre article de blog sans souris et utilisent un clavier ou une voix pour naviguer dans les éléments cliquables savent clairement quel élément est actuellement ciblé et a été cliqué.

Code JavaScript

Enfin, utilisez JavaScript pour rechercher chaque bouton de copie sur la page et ajoutez l'écouteur d'événement suivant pour chaque bouton. Ce code obtient l'identifiant unique de l'extrait de code d'origine du bouton, trouve la balise méta appropriée et copie le code d'origine stocké dans cette balise méta dans le presse-papiers. Assurez-vous d'utiliser `decodeURIComponent` pour copier l'extrait de code d'origine dans sa forme originale.

function makeId(length) {
  let result = "";
  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
  const charactersLength = characters.length;
  let counter = 0;
  while (counter < length) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
    counter += 1;
  }
  return result;
}

Cette solution se transfère bien vers votre framework front-end préféré. N’oubliez pas que les handicaps temporaires peuvent arriver à n’importe qui ; aucun de nous n’est immortel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!