Ви коли-небудь відкривали вебінспектор для підсвіченого коду на тому ж GitHub? Якщо так, то бʼюся об заклад, що ви бачили щось таке:
<span class="blob-code-inner blob-code-marker " data-code-marker=" ">
<span class="pl-s1">llm_type</span>
<span class="pl-c1">=</span>
<span class="pl-s1">fields</span>
.
<span class="pl-c1">ChoiceField</span>
(
</span>
Навіть простий рядок перетворюється на суп, щедро приправлений спанами. Як наслідок:
Але прийшов час радіти, бо тихо й непомітно зʼявилася специфікація Custom Highlight API, яка дозволяє розцяцьковувати текст на будь-який смак, не перевантажуючи сторінку оркестром диких span!
Тепер можна просто реєструвати Highlight, в який можна передати декілька діапазонів Range з позиціями, і вказувати стилі — усе без змін розмітки, завдяки CSS псевдоелементу ::highlight.
const range = new Range();
range.setStart(node, startOffset);
range.setEnd(node, endOffset);
const highlight = new Highlight(range);
CSS.highlights.set('myHighlight', highlight);
::highlight(myHighlight) {
background-color: yellow;
}І все. По суті, бравзер повністю забирає на себе побудову дерева стилів для масиву тексту, переносячи те, для що потребувало фактичного DOM-піддерева, у віртуальну структуру, приховану від сторонніх очей.
І нам лишається лише розпарсити текст на токени й описати яким діапазонам які стилі призначені.
Концептуально, звісно, суттєво нічого не змінилося — бравзеру так само необхідно надати інформацію, які послідовності символів як розмальовувати. Але замість повноважного DOM-дерева тепер для цього є швидка in-memory структура. А це, очевидно, позитивно впливає на продуктивність самої сторінки.
🌐 MDN: CSS Custom Highlight API
Використовувати цю можливість, очевидно, можна не лише для підсвітки синтаксису, а й для багатьох інших задач, які потребують динамічної стилізації тексту.
До речі, поділіться своїми думками, де би ця фіча стала в нагоді саме вам.
@babichdev