코드 조각 복사 버튼을 만드는 방법과 이것이 중요한 이유

2025년부터 수근관증후군을 앓고 있습니다. 고통을 덜기 위해 코딩, 웹 브라우징, 컴퓨터 작업에 음성을 사용하는 실험을 했습니다. 쉽지 않은 일이고, 직접 경험해 보지 않으면 이동성 문제가 있는 사람들에게 기술이 얼마나 적대적인지 이해하기 어렵습니다. 저를 아는 사람이라면 제가 항상 접근 가능한 웹과 접근 가능한 관행을 강력히 지지해 왔다는 것을 알고 있습니다. 하지만 손의 움직임이 제한된 것은 이번이 처음이었고 사용자가 최소한의 노력을 들여야 한다는 것을 결코 깨닫지 못했습니다. 작업의 중요성을 달성합니다.

음성 명령을 사용하여 코드 블록을 강조 표시하고 복사하는 것은 매우 어렵습니다. 적어도 지금은 불가능합니다(정말 불가능하거나 아직 손으로 웹 탐색 및 코딩을 찾지 못했습니다). 컴퓨터에는 많은 두뇌 능력이 필요합니다.) 따라서 코드에 대한 글을 작성할 때, 특히 독자가 코드를 복사하고 붙여넣는 튜토리얼을 만들 때 손 움직임이 제한된 사람들이 한 번의 클릭으로 코드를 복사할 수 있는 방법을 제공하는 것이 절대적으로 필요합니다.

수근관증후군이 생기기 전에는 코드 복사 버튼이 중복되는 줄 알았습니다. 그러나 나는 틀렸다. 그래서 제가 처음으로 수행한 음성 기반 코딩 작업 중 하나는 블로그 게시물의 모든 코드 조각에 코드 복사 버튼을 추가하는 것이었습니다. 저는 음성 코딩 여정에 대한 다른 블로그 게시물을 작성 중입니다. 관심이 있으시면 제가 사용해 온 도구는 VSCode의 Talon 및 Cursorless입니다. 음성으로 컴퓨터에서 모든 작업을 수행하는 방법을 다시 배우는 것은 가파른 학습 곡선이었지만 전체 과정을 통해 약간의 고통이 사라졌습니다. 예, 가능하면 언제든지 음성으로 이 블로그 게시물을 작성했습니다.

내 복사 조각 버튼 솔루션은 Eleventy 프로젝트에서 JavaScript 템플릿 엔진을 사용하여 순수 HTML, CSS 및 JavaScript로 작성되었습니다(따라서 중괄호를 사용한 문자열 보간 사용).

HTML(및 HTML 구축을 위한 일부 예비 JavaScript)

코드에 대한 블로그 게시물의 한 페이지에 여러 코드 블록 스니펫이 있을 수 있습니다. 따라서 복사할 올바른 콘텐츠를 찾으려면 각 코드 블록에 고유 ID를 할당해야 합니다. 외부 라이브러리를 사용하는 등 원하는 방식으로 고유 ID를 생성할 수 있지만 이것이 빌드 시 각 조각에 대해 수행되는 작업입니다.

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;
}

형식이 지정되고 구문이 강조 표시된 코드 블록에는 형식 지정과 강조 표시를 향상하기 위한 추가 HTML 및 CSS 클래스가 포함되므로 복사 버튼을 누르면 원본 코드 내용만 클립보드에 복사되도록 해야 합니다. 내 해결책은 JavaScript에서 쉽게 검색할 수 있도록 원래 코드 문자열을 메타 태그에 저장하는 것이었습니다(중복 HTML 태그를 제거하는 것과 반대입니다. 그래도 HTML 조각에서 HTML 태그를 제거하고 싶지 않습니다!). 또한 코드가 페이지에서 실행되지 않도록 원시 코드 문자열을 메타 태그에 저장할 때 `encodeURIComponent`를 사용해야 합니다(예: JavaScript 코드). 이 메타 태그는 내 블로그 게시물의 모든 코드 블록 옆에 있습니다.

다음, 코드 블록 또는 코드 블록 옆에 버튼을 추가하여 이전에 만든 고유 식별자를 인용하십시오. 또한 버튼 텍스트 옆에 작은 클립 보드 SVG 아이콘을 추가하도록 선택합니다. 생략 된 버튼을 선택하고 아이콘 만 사용하는 경우 'aria-label'을 사용하여 버튼에 이해할 수있는 보조 기술 (예 : "Copy Code Fragment")이 있는지 확인하십시오. <meta data-code-id="${thisCodeID}" data-code-to-copy="${encodeURIComponent(codeSnippet)}"> 복사

위 내용은 코드 조각 복사 버튼을 만드는 방법과 이것이 중요한 이유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!