Привет, Хабр!

Меня зовут Слава Рожнев. Я развиваю бесплатные SQL-проекты sqlize.online и sqltest.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 получают приоритет, а уже подсвеченные фрагменты в следующих проходах пропускаются.

Алгоритм такой:

1. Находим строки и комментарии, временно заменяем их плейсхолдерами.

2. Прогоняем подсветку ключевых слов, функций, констант и типов.

3. Подсвечиваем числа с защитой от ложных срабатываний внутри идентификаторов.

4. Возвращаем строки и комментарии обратно в разметку.

Главная идея: не пытаться быть полноценным SQL-парсером, а дать быстрый и контролируемый highlighter для веб-страниц и учебного контента.

Почему не полноценный парсер

Потому что для моей задачи это было бы избыточно:

• сложнее сопровождать

• тяжелее для фронтенда

• больше edge cases и зависимостей

Regex-подход не идеален, но при грамотной изоляции строк/комментариев и аккуратных проходах дает хороший баланс между качеством, скоростью и размером.

Настройка под диалекты

Еще одна важная часть проекта: возможность расширять словари без форка.

Можно добавить свои ключевые слова, функции, константы и типы под конкретный диалект, после чего прогнать подсветку по нужным блокам. Это удобно для обучающих платформ, где встречаются конструкции из разных SQL-экосистем.

При этом не нужно обновлять сам скрипт или поддерживать собственный форк библиотеки. Достаточно расширить встроенные словари на стороне проекта:

SQLHighlighter.extend({
	keyWords: ['MERGE', 'PIVOT'],
	functions: ['ARRAY_AGG', 'STRING_AGG'],
	constants: ['CURRENT_ROLE'],
	types: ['JSONB', 'UUID']
});

SQLHighlighter.highlightCodeBlocks();

То есть базовая библиотека остается неизменной, а нужные keywords и functions можно подключать точечно под конкретный продукт, курс или SQL-диалект.

Стили и темы

В проекте есть отдельные стили с токен-классами и CSS-переменными. Это позволяет быстро интегрировать подсветку в любой дизайн и переопределять цвета под свою тему, не трогая логику highlighter.

Для кого этот инструмент

sql-highlighter особенно полезен, если вам нужно:

• подсвечивать SQL в документации и учебных материалах

• быстро встроить подсветку в сайт без тяжелых зависимостей

• контролировать набор подсвечиваемых слов под свой продукт

• иметь минималистичное решение, которое легко читать и дорабатывать

Как я его разрабатывал

Заметную часть работы я делал с помощью Claude в качестве ассистента в процессе разработки: для ускорения рутинных задач, генерации промежуточных вариантов и быстрой проверки идей.

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

Что дальше

Планирую развивать проект в сторону:

• более точной поддержки популярных SQL-диалектов

• расширения тестового покрытия

• улучшения темизации и UX-интеграции

Если вам интересна тема SQL-образования, браузерных инструментов и легковесной подсветки кода, буду рад обратной связи и контрибьюциям.

Репозиторий проекта: sql-highlighter

Спасибо за чтение.