Идeально было бы использовать фоном
element нумератора, как я понял. Который, к сожалению, в FF только и работает.
На данный момент я попытался использовать фоновый наблюдатель мутаций:
// Create an observer instance linked to the callback function
window.user_observer = new MutationObserver(WatchMutations);
// Options for the observer (which mutations to observe)
const config = { attributes: false, childList: true, subtree: true };
// Start observing the target node for configured mutations
window.user_observer.observe(document, config);
function WatchMutations(mutations, observer) {
for(var mutation of mutations) {
// examine new nodes, is there anything to highlight?
for(var node of mutation.addedNodes) {
// we track only elements, skip other nodes (e.g. text nodes)
if(node instanceof HTMLElement) {
// check the inserted element for being a code snippet
if(node.matches("textarea[data-lines]")) {
node.addBuddy();
}
}
}
}
}
Который выполняет свою функцию и сам добавляет нумератор строк к каждому текстовому полю с флагом «data-lines». Не знаю, как сильно это скажется на производительности и просто экспериментирую…
Также, теперь прокрутка мышью работает и над нумерацией, но имеются нюансы, так как пришлось само текстовое поле поставить поверх нумератора, сделав фон главного элемента прозрачным. Из-за чего вся страница позади стала фоном под текстом. А сам нумератор пришлось правымм бордюром растянуть так, чтобы он и стал фоном под текстом. В следствии чего имеются приличные глюки с просветами при ресайзинге мышью.
Да, эти два "товарища" помещены внутрь div вместе с header и footer.
Но, как Вы понимаете, это для визуального акцента на демострацию того, что я хочу. А в идеале должен быть собственно сам textarea без каких-либо сущностей, чтобы
засорять вёрстку лишним
матрёшиством (чем грешит абсолютное большинство сайтов).
P.S.: Есть ещё вариант с canvas-фоном…