#browser_api
Ви коли-небудь відкривали вебінспектор для підсвіченого коду на тому ж 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>

Навіть простий рядок перетворюється на суп, щедро приправлений спанами. Як наслідок: смертельная гангрена купа додаткових вузлів, що захаращують DOM і можуть призвести до суттєвих просадок швидкодії сторінки.

Але прийшов час радіти, бо тихо й непомітно зʼявилася специфікація 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