Então acabei criando um híbrido.

É um SVG gerado dinamicamente, armazenado como uma Propriedade personalizada CSS — e usado como imagem de fundo, herdando os estilos de seu elemento pai .

Vamos mergulhar.

JavaScript

Primeiro, o método principal:

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

element é o elemento a ser usado, numLines o número de linhas a serem renderizadas e inline indica se a imagem gerada deve ser armazenada no elemento (true) ou em document.body (false).

Em seguida, definimos um prefixo para a propriedade personalizada:

const prefix = '--linenum-';

Antes de continuarmos, verificamos se devemos reutilizar alguma propriedade existente:

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

Em seguida, extraímos estilos do elemento, renderizando o SVG com a mesma família de fontes, tamanho de fonte, altura de linha etc.

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

Vamos detalhar: