#фишка дня

Как вы обычно подсвечиваете какой-то конкретный текст в словах?

Ну, например, пишешь ты приложение для изучения языка, и тебе надо подсветить корень слова или там окончание. Или, простите, суффикс.

Наверное, обернёшь кусок текста в span? Ну, пожалуй.

Вот сиди и пиши код, который бьёт текст на отрезки, потом динамически за ними следит, если нужно...

К счастью, скоро будет чуток попроще и логичнее, потому что к нам заезжает Highlight API!

Как следует из названия, это буквально API для подсветки диапазона (Range) символов.

1. Создаём экземпляр Highlight()
2. Подпихиваем его в коллекцию CSS.highlights, в этот момент экземпляру подсветки можно дать некоторое название, по цвету, например, или отрезку слова.
3. В CSS пишем:

::highlight(rangeName) {
  color: #b3b308;
}

4. Вы великолепны.

Пример c иллюстрации и MDN: https://codepen.io/alinaki/pen/OJqdJbw

В FIrefox пока не поддерживается, а в Safari — с 17 версии.

Но это уже очень многообещающе и никаких (вообще) манипуляций с DOM.

Ждем пока появятся библиотеки подсветки кода, основанные на Highlight API, котаны!

Кстати, класс Range очень интересный, надо бы его подробнее изучить.

#css #highlight

#статья дня

Когда разработчикам браузеров заняться нечем, они... занимаются подсветкой текста.

Ладно, кроме шуток. Для некоторых задач подсветка текста поважнее будет, чем View Transitions API. Например, как вам текстовый редактор, который подсвечивает слова не путём создания тысяч элементов span, а с накладывая CSS прямо на текст?

А это ближе, чем кажется! И вот Брамус Ван Дамм написал большую статью, описывающую современное состояние Custom Highlight API. И, если коротко, фича уже вполне готова, чтобы создавать редакторы кода буквально на одном contenteditable элементе!

Собственно, что нам нужно?
1. Токенайзер — выделение значащих "токенов" в текста: зарезервированные слова, переменные, комментарии... В примере используется токенайзер из Prism.js
2. Генератор CSS для Custom Highlight API.
3. ...
4. Готово!

Вот статья: https://www.bram.us/2024/02/18/custom-highlight-api-for-syntax-highlighting/

Да, пока не без косяков, включая рандомные проблемы с производительностью, но работа идёт!

И пример для самых нетерпеливых: https://codepen.io/bramus/pen/MWxLjEo

#css #highlight

#заметка дня

А помните (конечно же помните!) как мы с вами обсуждали CSS Custom Highlight API для реализации подсветки кода?

Ну вот же, положила: https://yangx.top/htmlshit/2715

Так вот, а почему бы не объединить подсветку CSS с поиском по тексту? Ну в самом деле, интересно же, как это реализовано, например, в текстовых редакторах или браузерах при поиске по странице. Хотя бы на минимальном уровне.

А реализовано это через, простите, обход дерева!

Алгориииииитмы

Ладно, нам не придётся самим писать обходчик, он уже имеется! Вот: https://developer.mozilla.org/en-US/docs/Web/API/Document/createTreeWalker

Главное — это понять, какой параметр фильтрации узлов передать. Ведь объектная модель документа она не только из тегов состоит, там как минимум параллельно идут атрибуты, текст, комментарии... Нам незачем искать вообще по всему.

Ну в нашем случае всё просто: NodeFilter.SHOW_TEXT — ищем по текстовым нодам, словам.

Ну а дальше всё просто: проверяем регуляркой на совпадения и запускаем подсветку. Уж это за нас теперь может и браузер делать: https://codepen.io/alinaki/pen/zxvPbRJ

Да, теперь можно и ваших камтомных селектах красиво подсветить результат фильтрации.

Пользуемся, котаны.

#css #highlight