title: Missing some color? How to improve or add your own SQL syntax Highlighter author: Hue Team type: post date: 2019-10-31T10:42:47+00:00 url: /how-to-improve-or-add-your-own-sql-syntax-highlighter/ sf_thumbnail_type:
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 for ‘REINDEX’ keyword
With correct highlighting
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:
{{< highlight bash >}}pgsql.js pgsql_highlight_rules.js {{< /highlight >}}
The list of keywords is present in *_highlight_rules.js and can be updated there.
{{< highlight javascript >}}var keywords = (
"ALL|ALTER|REINDEX|..."
) {{< /highlight >}}
Afterwards, run:
{{< highlight bash >}}make ace {{< /highlight >}}
And after refreshing the editor page, the updated mode will be activated.
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:
{{< highlight javascript >}}KsqlHighlightRules.metaData = { fileTypes: ["ksql"], name: "ksql", scopeName: "source.ksql" }; {{< /highlight >}}
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:
{{< highlight javascript >}}ksql: { placeHolder: '${ _("Example: SELECT * FROM stream, or press CTRL + space") }', aceMode: 'ace/mode/ksql', snippetIcon: 'fa-database', sqlDialect: true }, {{< /highlight >}}
And cf. above prerequisites, any interpreter snippet with ksql will pick-up the new highlighter:
{{< highlight bash >}}[[[ksql]]]
name = KSQL Analytics
interface=ksql
{{< /highlight >}}
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