Как я сделал легкий инструмент SQL-подсветки без тяжелых зависимостей
Однажды я понял, что подсветка SQL в обучающих проектах — это тот еще квест.
В sqltest.online я использовал highlight.js для подсветки SQL в учебных заданиях.
Либо библиотека тащит за собой лишнее, либо нормально подсвечивает только учебный SQL в духе `SELECT * FROM table`, а как дело доходит до диалектов, функций и более живых запросов, начинается боль.
Я сначала пробовал готовые решения. Потом пытался допиливать описание SQL для highlight.js. В какой-то момент стало понятно: проще собрать свой инструмент под эту задачу, чем дальше воевать с универсальными решениями.
Так появился **sql-highlighter** — легкий JavaScript-хайлайтер для SQL, который:
не тянет тяжелые зависимости,
работает прямо в браузере,
поддерживает light/dark темы,
умеет расширяться под конкретный диалект без правок ядра.
Как это устроено:
Сначала строки и комментарии временно выносятся в отдельные плейсхолдеры.
Потом проходят основные токены: ключевые слова, функции, типы и т.д.
Затем возвращаются строки и комментарии.
Важный момент: порядок обработки имеет значение, чтобы не ломать конструкции вроде `GROUP BY` или `SELECT DISTINCT`.
Самое приятное — можно добавить свои ключевые слова и функции через `SQLHighlighter.extend(...)`, не лезя внутрь библиотеки. Это удобно, если у вас обучающий проект, документация или свой SQL-диалект.
Если коротко: я делал не универсальный SQL-парсер на все случаи жизни, а практичный и быстрый инструмент для реальных веб-проектов, где важны размер, простота и нормальная подсветка.
Если вам нужен SQL-highlighter для сайта, документации или обучения, вот репозиторий проекта: sql-highlighter
