Lightweight SQL Syntax Highlighter for the Browser: Why I Built sql-highlighter
If you need a lightweight SQL syntax highlighter for docs, tutorials, or training platforms, this article explains a practical approach that works without heavy dependencies.
My name is Slava Rozhnev. I build free SQL learning projects sqlize.online and sqltest.online, where users practice SQL on real examples.
In this post, I share:
- why I created my own browser SQL highlighter
- how it works internally
- how to support modern SQL keywords and functions
- how to extend highlighted tokens without changing the library itself
TL;DR
I built sql-highlighter, a small dependency-free JavaScript SQL highlighter, because standard configurations in larger libraries did not fully cover modern, dialect-specific SQL used in educational content.
The implementation uses ordered regex passes with safe handling of strings/comments, supports light and dark themes, and allows extending keywords/functions via SQLHighlighter.extend(...) without updating the core script.
Why I Built a Custom SQL Syntax Highlighter
On sqltest.online, I initially used highlight.js for SQL code highlighting.
In practice, many modern or dialect-specific SQL words were not highlighted. I forked the SQL definition, added missing keywords, and submitted a pull request, but it was rejected.
The reason: those additions were not part of standard SQL.
That is reasonable for a universal library. But for a learning platform, I needed practical coverage of real-world SQL syntax. So I built a focused highlighter designed for this exact use case.
What sql-highlighter Is
sql-highlighter is a dependency-free SQL syntax highlighter for the browser.
It is designed to be simple to adopt:
- no framework required
- no mandatory build step
- works with regular script and CSS includes
- also available via npm
Repository and docs: README.md
What Gets Highlighted
The library highlights the SQL tokens that matter most in real queries and training material:
- SQL keywords
- built-in SQL functions
- data types
- string literals
- comments
- numbers
Function names are highlighted only when used as function calls, which helps avoid false positives when the same word is used as an identifier.
How the Highlighter Works
The architecture is intentionally small: dictionaries + regular expressions + sequential text passes.
A key detail is processing order. Multi-word constructs such as SELECT DISTINCT and GROUP BY are processed before single-word keywords. This prevents partial or repeated matching after a longer construct has already been highlighted.
Algorithm:
- Find strings and comments and replace them with temporary placeholders.
- Highlight keywords, functions, constants, and types.
- Highlight numbers while avoiding matches inside identifiers.
- Restore placeholders as
.comment and .string spans.
The goal is not full SQL parsing. The goal is fast, reliable SQL highlighting for web pages.
Why Regex Instead of a Full SQL Parser
For this product, a full parser would be too heavy:
- more maintenance complexity
- larger frontend footprint
- more dependencies and parser-specific edge cases
With careful ordering and token isolation, regex gives an effective balance of quality, speed, and bundle size.
Extend Keywords and Functions Without Updating the Script
This is one of the most useful capabilities.
You can extend supported SQL keywords/functions for your dialect directly in your project, without forking or modifying the base library.
SQLHighlighter.extend({
keyWords: ['MERGE', 'PIVOT'],
functions: ['ARRAY_AGG', 'STRING_AGG'],
constants: ['CURRENT_ROLE'],
types: ['JSONB', 'UUID']
});
SQLHighlighter.highlightCodeBlocks();
This keeps the core script stable while allowing product-level customization for specific SQL courses or database dialects.
Styling, Theming, and UX
The project uses token classes and CSS variables, so it is easy to integrate into existing design systems.
It also supports both light and dark themes, which is useful for modern docs, tutorials, and developer portals.
Who Should Use sql-highlighter
Use this tool if you need to:
- highlight SQL in learning content or technical documentation
- add SQL code highlighting to a site quickly
- avoid heavy dependencies for a simple frontend feature
- customize highlighted SQL keywords/functions by dialect
Development Notes
I used Claude for parts of the development workflow to speed up repetitive implementation tasks and quickly validate ideas.
Architecture and behavior decisions were driven by real requirements and user feedback from my SQL learning platforms.
Roadmap
Next improvements include:
- broader SQL dialect coverage
- expanded automated test coverage
- improved theming and UX integration
If you build SQL education tools or SQL-heavy docs, feedback and contributions are welcome.
FAQ
Is this a full SQL parser?
No. It is a regex-based highlighter designed for speed and practical browser usage.
Can I add custom SQL keywords?
Yes. Use SQLHighlighter.extend(...) to add custom keywords, functions, constants, and types.
Do I need to fork the project to support my SQL dialect?
No. Dialect-specific extensions can be added in your own code without changing the core library.
Is it suitable for production websites?
Yes, especially when you need fast, lightweight SQL highlighting for docs, tutorials, and educational content.
Repository: sql-highlighter
Thanks for reading.