В итоге я создал гибрид.

Это динамически создаваемый SVG, хранящийся как Пользовательское свойство CSS — и используемый в качестве фонового изображения, наследующий стили от родительского элемента .

Давайте углубимся.

JavaScript

Во-первых, основной метод:

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

element — это элемент , который нужно использовать, 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);

Нам также нужен случайный идентификатор для нашего объекта:

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. Номера строк генерируются как один SVG и хранятся в пользовательском свойстве CSS.

Автоматическая синхронизация

Поскольку номера строк являются частью фонового изображения, они автоматически прокручиваются вместе с текстовым содержимым, что устраняет необходимость в логике ручной синхронизации.

Повторное использование элементов

Сохраняя сгенерированный SVG в пользовательском свойстве CSS, его можно повторно использовать в нескольких элементах. Это означает, что если нескольким элементам требуются одинаковые номера строк, все они могут ссылаться на одно и то же пользовательское свойство, избегая избыточной генерации SVG.

Масштабируемость

Векторная природа SVG гарантирует, что номера строк останутся четкими и четкими при любом уровне масштабирования.

Минусы

Доступность

Упорядоченные списки более доступны для программ чтения с экрана и вспомогательных технологий, а номера строк на основе SVG могут быть проигнорированы или неправильно истолкованы.

Сложность настройки

Стилизовать отдельные номера строк в упорядоченном списке и взаимодействовать с ними очень просто. Напротив, подход SVG затрудняет настройку или добавление интерактивности к определенным номерам строк.

Совместимость браузера

Пользовательские свойства SVG и CSS могут не отображаться одинаково во всех браузерах — текущая реализация имеет проблемы с Safari, где нам нужно вычесть (paddingTop / 10) из TranslateY.

Динамическая обработка контента

Упорядоченные списки могут быть более гибкими для обработки динамических обновлений контента, таких как добавление или удаление строк, тогда как подход SVG может потребовать регенерации и повторного применения всего фонового изображения.