그래서 결국 하이브리드를 만들게 되었습니다.

동적으로 생성된 SVG이며 CSS 사용자 정의 속성으로 저장되고 배경 이미지로 사용되며 상위 요소의 스타일을 상속합니다.

자세히 살펴보겠습니다.

자바스크립트

먼저 주요 방법은 다음과 같습니다.

lineNumbers(element, numLines = 50, inline = false)

요소는 사용할 요소이고, numLines는 렌더링할 줄 수이며, inline은 생성된 이미지를 요소에 저장할지(true), 아니면 document.body에 저장할지(false) 여부를 나타냅니다.

다음으로 사용자 정의 속성에 대한 접두사를 정의합니다.

const prefix = '--linenum-';

계속하기 전에 기존 속성을 재사용할지 여부를 확인합니다.

if (!inline) {
  const styleString = document.body.getAttribute('style') || '';
  const regex = new RegExp(`${prefix}[^:]*`, 'g');
  const match = styleString.match(regex);

  if (match) {
    element.style.backgroundImage = `var(${match[0]})`;
    return;
  }
}

다음으로 요소에서 스타일을 추출하여 동일한 글꼴 모음, 글꼴 크기, 줄 높이 등을 사용하여 SVG를 렌더링합니다.:

const bgColor = getComputedStyle(element).borderColor;
const fillColor = getComputedStyle(element).color;
const fontFamily = getComputedStyle(element).fontFamily;
const fontSize = parseFloat(getComputedStyle(element).fontSize);
const lineHeight = parseFloat(getComputedStyle(element).lineHeight) / fontSize;
const paddingTop = parseFloat(getComputedStyle(element).paddingTop) / 2;
const translateY = (fontSize * lineHeight).toFixed(2);

우리 자산에도 임의의 ID가 필요합니다:

const id = `${prefix}${Math.random().toString(36).substr(2, 6)}`;

이제 SVG를 렌더링할 차례입니다.

const svg = ``;

분석해 보겠습니다.

마지막 부분은 numLines에서 생성된 배열을 반복하고 요소를 기본 SVG에 추가합니다.

거의 다 왔습니다!

생성된 SVG를 url() 속성으로 사용하려면 다음을 인코딩해야 합니다.

const encodedURI = `url("data:image/svg xml,${encodeURIComponent(svg)}")`;

그리고 마지막으로 요소 또는 문서 본문에 해당 속성을 설정합니다.

const target = inline ? element : document.body;
target.style.setProperty(id, encodedURI);
element.style.backgroundImage = `var(${id})`;

그리고 그게 다입니다!

나쁘지 않습니다. 축소 및 압축된 610바이트입니다!

데모

여기에서 데모를 볼 수 있으며 여기에서 전체 스크립트를 다운로드할 수 있습니다.

다음은 인라인 속성 로직을 사용하지 않고 단순화된 Codepen입니다.

장점과 단점

장점과 단점이 있나요? 물론 있습니다!

개인적으로는 현재 프로젝트의 경우 내의 JSON 미리보기에 줄 번호를 추가하는 간단하고 명확한 방법이 필요했는데 이 방법이 적합했습니다.

장점

DOM 조작 감소

이 방법은 DOM 조작에 의존하지 않습니다. 행 번호는 CSS 사용자 정의 속성에 저장된 단일 SVG로 생성됩니다.

자동 동기화

줄 번호는 배경 이미지의 일부이므로 텍스트 내용과 함께 자동으로 스크롤되므로 수동 동기화 논리가 필요하지 않습니다.

요소 간 재사용성

생성된 SVG를 CSS 사용자 정의 속성에 저장하면 여러 요소에서 재사용할 수 있습니다. 즉, 여러 요소에 동일한 줄 번호가 필요한 경우 중복되는 SVG 생성을 방지하면서 모두 동일한 사용자 정의 속성을 참조할 수 있습니다.

확장성

SVG의 벡터 특성으로 인해 어떤 확대/축소 수준에서도 줄 번호가 또렷하고 명확하게 유지됩니다.

단점

접근성

순서가 지정된 목록은 스크린 리더 및 보조 기술을 통해 더 쉽게 액세스할 수 있는 반면, SVG 기반 줄 번호는 무시되거나 잘못 해석될 수 있습니다.

맞춤화 복잡성

순서가 지정된 목록에서 개별 줄 번호의 스타일을 지정하고 상호 작용하는 것은 간단합니다. 대조적으로, SVG 접근 방식을 사용하면 특정 줄 번호에 대화형 기능을 추가하거나 사용자 정의하기가 더 어렵습니다.

브라우저 호환성

SVG 및 CSS 사용자 정의 속성은 모든 브라우저에서 일관되게 렌더링되지 않을 수 있습니다. 현재 구현에는 Safari에 문제가 있어 번역에서 (paddingTop / 10)을 빼야 합니다.

동적 콘텐츠 처리

정렬된 목록은 줄 추가 또는 제거와 같은 동적 콘텐츠 업데이트를 처리하는 데 더 유연할 수 있는 반면, SVG 접근 방식은 전체 배경 이미지를 재생성하고 다시 적용해야 할 수 있습니다.