
SQL-подсветка без тяжелых зависимостей: как и зачем я сделал свой sql-highlighter
rozhnev 29 минут назад SQL-подсветка без тяжелых зависимостей: как и зачем я сделал свой sql-highlighter 3 мин 1.1K JavaScript * SQL * DIY или Сделай сам Обзор Привет, Хабр!Меня зовут Слава Рожнев. Я развиваю бесплатные...
<5 — 2026'da uzaya kaç SpaceX Starship fırlatması ulaşacak?
В сфере искусственного интеллекта произошло заметное событие. rozhnev 29 минут назад SQL-подсветка без тяжелых зависимостей: как и зачем я сделал свой sql-highlighter 3 мин 1. 1K JavaScript * SQL * DIY или Сделай сам Обзор Привет, Хабр! Меня зовут Слава Рожнев.
Я развиваю бесплатные SQL-проекты sqlize. online, где пользователи изучают SQL на практических примерах. В этой статье расскажу, почему я сделал собственный SQL syntax highlighter для браузера, какие задачи он решает, как устроен внутри и почему иногда проще написать маленький специализированный инструмент, чем тащить большую универсальную библиотеку.
Технические детали
Откуда появилась идеяВ sqltest. online я использовал highlight. js для подсветки SQL в учебных заданиях.
На практике выяснилось, что многие популярные слова и конструкции современного SQL (особенно диалектные) не подсвечиваются. Я сделал форк, добавил недостающие ключевые слова, подготовил pull request, но его отклонили. Аргумент был в том, что добавленные слова не относятся к стандартному SQL.
Это логичная позиция для универсальной библиотеки, но для обучающего продукта мне нужна была более гибкая и практичная подсветка. Так и родилась идея написать свой компактный highlighter под конкретную задачу. Что за проектПроект называется sql-highlighter.
Отраслевые последствия
Это небольшой dependency-free highlighter для браузера:без фреймворковбез build step для использованияподключается как обычный script и cssумеет работать и через npmИсходники и документация доступны в репозитории: README. mdЧто именно подсвечиваетсяБиблиотека фокусируется на SQL-токенах, которые важны в учебных примерах и реальных запросах:ключевые словавстроенные функциитипы данныхстроковые литералыкомментариичислаОтдельно важно, что функции подсвечиваются только при вызове (когда после имени идет скобка), чтобы не ломать случаи, где то же слово используется как имя колонки или алиас. Как это работает внутриАрхитектура максимально простая: словари + регулярные выражения + последовательные проходы по тексту.
Отдельно учитывается порядок обработки ключевых слов: составные конструкции вроде SELECT DISTINCT или GROUP BY должны подсвечиваться раньше одиночных слов. Иначе после подсветки SELECT DISTINCT отдельный SELECT может попытаться сработать повторно. Поэтому более длинные и многословные keywords получают приоритет, а уже подсвеченные фрагменты в следующих проходах пропускаются.
Алгоритм такой:Находим строки и комментарии, временно заменяем их плейсхолдерами. Прогоняем подсветку ключевых слов, функций, констант и типов. Подсвечиваем числа с защитой от ложных срабатываний внутри идентификаторов.
Этот прогресс даёт важные сигналы о будущем отрасли, и технологический мир внимательно наблюдает.





