Wie man eine Schaltfläche zum Kopieren von Code-Snippets erstellt und warum sie wichtig ist

Seit 2025 leide ich unter dem Karpaltunnelsyndrom. Um die Schmerzen zu lindern, habe ich damit experimentiert, meine Stimme zum Codieren, Surfen im Internet und für die Arbeit am Computer zu nutzen. Es ist nicht einfach und es ist schwer zu verstehen, wie feindselig Technologie auf Menschen mit Mobilitätseinschränkungen sein kann, wenn man sie nicht aus erster Hand erlebt. Jeder, der mich kennt, weiß, dass ich schon immer ein starker Befürworter von barrierefreiem Web und barrierefreien Praktiken war, aber dies war das erste Mal, dass ich eingeschränkte Handbewegungen erlebte, und mir war nie klar, dass dies für den Benutzer nur minimalen Aufwand erfordern würde die Wichtigkeit der Aufgabe erfüllen.

Die Verwendung von Sprachbefehlen zum Hervorheben und Kopieren von Codeblöcken ist äußerst schwierig, zumindest für mich derzeit nicht möglich (entweder wirklich unmöglich, oder ich habe einfach noch keinen Weg gefunden, ohne praktische Hilfe im Internet zu surfen und zu programmieren). Computer erfordern viel Gehirnleistung). Daher ist es beim Schreiben über Code und insbesondere beim Erstellen von Tutorials, bei denen Leser Code kopieren und einfügen, unbedingt erforderlich, Personen mit eingeschränkter Handbewegung eine Möglichkeit zu bieten, Code mit einem Klick zu kopieren .

Bevor ich das Karpaltunnelsyndrom bekam, dachte ich, die Schaltfläche zum Kopieren des Codes sei überflüssig. Aber ich habe mich geirrt. Eine meiner ersten sprachbasierten Codierungsaufgaben bestand darin, allen Codefragmenten in meinen Blogbeiträgen eine Schaltfläche zum Kopieren von Code hinzuzufügen. Ich arbeite an einem weiteren Blogbeitrag über meine Reise mit der Sprachcodierung, aber wenn Sie interessiert sind: Die Tools, die ich verwendet habe, sind Talon und Cursorless in VSCode. Es war eine steile Lernkurve, neu zu lernen, wie man alles am Computer mit Sprache erledigt, aber der ganze Prozess hat mir einige Schmerzen genommen. Ja, ich habe diesen Blogbeitrag, wann immer möglich, mit Stimme geschrieben.

Meine Lösung zum Kopieren von Snippet-Schaltflächen wurde in reinem HTML, CSS und JavaScript in einem Eleventy-Projekt unter Verwendung der JavaScript-Vorlagen-Engine geschrieben (daher die Verwendung von String-Interpolation mit geschweiften Klammern).

HTML (und etwas vorläufiges JavaScript zum Erstellen von HTML)

In einem Blog-Beitrag über Code befinden sich möglicherweise mehrere Codeblock-Snippets auf einer Seite. Daher müssen Sie jedem Codeblock eine eindeutige ID zuweisen, um den richtigen Inhalt zum Kopieren zu finden. Sie können eindeutige IDs auf beliebige Weise generieren, z. B. mithilfe einer externen Bibliothek. Dies mache ich jedoch zur Erstellungszeit für jedes Snippet.

<code class="language-javascript">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;
}</code>

Angesichts der Tatsache, dass formatierte und syntaxhervorgehobene Codeblöcke zusätzliche HTML- und CSS-Klassen enthalten, um die Formatierung und Hervorhebung zu verbessern, müssen wir sicherstellen, dass die Schaltfläche „Kopieren“ nur den ursprünglichen Codeinhalt in die Zwischenablage kopiert. Meine Lösung bestand darin, die ursprüngliche Codezeichenfolge in einem Meta-Tag zu speichern, um sie in JavaScript leicht abrufen zu können (anstatt überflüssige HTML-Tags zu entfernen; selbst dann wollen wir keine HTML-Tags aus dem HTML-Snippet entfernen!). Sie müssen auch „encodeURIComponent“ verwenden, wenn Sie Rohcodezeichenfolgen in Meta-Tags speichern, damit der Code nicht auf der Seite ausgeführt wird (z. B. JavaScript-Code). Dieses Meta-Tag befindet sich neben jedem Codeblock in meinen Blogbeiträgen.

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

Fügen Sie als Nächstes eine Schaltfläche neben oder innerhalb des Codeblocks hinzu, die auf die eindeutige Kennung verweist, die Sie zuvor erstellt haben. Ich habe mich außerdem dafür entschieden, neben dem Schaltflächentext ein kleines SVG-Symbol für die Zwischenablage hinzuzufügen. Wenn Sie den Schaltflächentext weglassen und nur ein Symbol verwenden, achten Sie darauf, „aria-label“ zu verwenden, um sicherzustellen, dass die Schaltfläche einen zugänglichen Namen hat, den unterstützende Technologien (z. B. Bildschirmleseprogramme) verstehen können (z. B. „Snippet kopieren“). ).

Kopieren

CSS-Stil

Ich werde Ihnen nicht vorschreiben, wie Sie diese Schaltfläche zum Kopieren in Ihren eigenen Blog-Beiträgen gestalten, aber ich habe mich dafür entschieden, sie unbedingt in der oberen rechten Ecke jedes Codeblocks zu positionieren. Stellen Sie sicher, dass Sie fokussierte, aktive und im Fokus sichtbare Stile auf Ihren Schaltflächen verwenden, um sicherzustellen, dass diejenigen, die Ihren Blog-Beitrag ohne Maus lesen und eine Tastatur oder Stimme verwenden, um durch anklickbare Elemente zu navigieren, klar wissen, welches Element gerade fokussiert ist und angeklickt wurde.

JavaScript-Code

Verwenden Sie abschließend JavaScript, um jede Kopierschaltfläche auf der Seite zu finden, und fügen Sie für jede Schaltfläche den folgenden Ereignis-Listener hinzu. Dieser Code ruft die eindeutige Kennung des ursprünglichen Codeausschnitts von der Schaltfläche ab, findet das relevante Meta-Tag und kopiert den in diesem Meta-Tag gespeicherten Originalcode in die Zwischenablage. Stellen Sie sicher, dass Sie „decodeURIComponent“ verwenden, um das ursprüngliche Code-Snippet in seine ursprüngliche Form zu kopieren.

<code class="language-javascript">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;
}</code>

Diese Lösung lässt sich gut auf Ihr bevorzugtes Front-End-Framework übertragen. Denken Sie daran, dass vorübergehende Behinderungen jedem passieren können; keiner von uns ist unsterblich.

Das obige ist der detaillierte Inhalt vonWie man eine Schaltfläche zum Kopieren von Code-Snippets erstellt und warum sie wichtig ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!