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

Published on 31 October 2019 in Version 4 - 2 minutes read - Last modified on 26 May 2021

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:

pgsql.js
pgsql_highlight_rules.js

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

var keywords = (
    "ALL|ALTER|REINDEX|..."
)

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:

[[[ksql]]]
    name = KSQL Analytics
    interface=ksql

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

26 June 2024
Integrating Trino Editor in Hue: Supporting Data Mesh and SQL Federation
Read More
03 May 2023
Discover the power of Apache Ozone using the Hue File Browser
Read More