Missing some color? How to improve or add your own SQL syntax Highlighter

Published on 31 October 2019 in Querying / Version 4.6 - 2 minutes read - Last modified on 04 February 2020

Hue’s Editor SQL functionalities makes it much more easier to query your databases and datawarehouses. It was previously described about how to improve or create your own SQL autocompleter so that the Querying Experience gets even more effective. This post is about going one step further and improving the SQL syntax highlighting.

New keywords might not be properly colored highlighted in the editor. This is especially true when adding a new language. Here is how to fix that.

Missing highlighting

Missing highlighting for ‘REINDEX’ keyword

With highlighting

With correct highlighting

Updating keywords

The Editor is currently visually powered by Ace. The list of supported languages is found in the mode directory.

For each dialect, we have two files. e.g. with PostgreSQL:


The list of keywords is present in *_highlight_rules.js and can be updated there.

var keywords = (

Afterwards, run:

make ace

And after refreshing the editor page, the updated mode will be activated.

Adding new dialect

To add a new dialect, it is recommended to copy the two files of the closest mode and rename all the names inside. For example, if we were creating a new ksql mode, pgsql_highlight_rules.js would become ksql_highlight_rules.js and we would rename all the references inside to psql to ksql. Same with pgsql.js to ksql.js. In particular, the name of the mode to be referenced later is in:

KsqlHighlightRules.metaData = {
  fileTypes: ["ksql"],
  name: "ksql",
  scopeName: "source.ksql"

Tip: inheritance of modes is supported by Ace, which make it handy for avoiding potential duplications.

In the Editor, the mapping between Ace’s modes and the type of snippets is happening in editor_components.mako.

In the KSQL case we have:

ksql: {
  placeHolder: '${ _("Example: SELECT * FROM stream, or press CTRL + space") }',
  aceMode: 'ace/mode/ksql',
  snippetIcon: 'fa-database',
  sqlDialect: true

And cf. above prerequisites, any interpreter snippet with ksql will pick-up the new highlighter:

    name = KSQL Analytics

Note: after HUE-8758 we will be able to have multiple interpreters on the same dialect (e.g. pointing to two different databases of the same type).


Any feedback or question? Feel free to comment here or on the Forum or @gethue and quick start SQL querying!

Romain from the Hue Team

comments powered by Disqus

More recent stories

11 March 2020
Automatically checking documentation and website dead links with Continuous Integration
Read More
04 March 2020
A better collaborative Data Warehouse Experience with SQL query sharing via links or gists
Read More
27 February 2020
Re-using the JavaScript SQL Parser
Read More