GNOME Builder: how to recognize .hbs files as html files?

Hello GNOME users and developers!

Does anybody here knows how you can make GNOME builder recognize .hbs (handlebar files) as HTML files?

The goal is to have syntax highlighting turned on automatically.

Scott Trakker

GNOME Builder’s language definitions are in GtkSourceView:

You can create a new language definition in your home directory based on html.lang. For inclusion in GtkSourceView, it looks like you would also need to request a MIME type for it in shared-mime-info, but for personal use, keeping text/html seems to work.

If you are using the GNOME Builder flatpak, the file needs to go in ~/.var/app/org.gnome.Builder/data/gtksourceview-4/language-specs/

Once you have a duplicate of html.lang working, you can try to add support for the template syntax using the reference linked above.

Hello Chris,

Thank you very much for your help!

What I did:

  1. I copied the file html.lang from gitlab and placed this file in the folder ~/.var/app/org.gnome.Builder/data/gtksourceview-4/language-specs/.
  2. After that I renamed the file to hbs.lang, changed the id and name to hbs and replaced the text in the globs property to *.hbs.

When I open Builder and go to Preferences -> Programming languages the language HSB is recognized! However when I open a .hbs file in Builder the syntax highlighting is still not turned on. Is there still something else I have to do?

I looked into the documentation of adding a mimetype but it’s still not clear to me how to do this. I’m also not sure if it’s really necessary.

I had the same problem at first when I tested this. If you run Builder in a terminal (flatpak run org.gnome.Builder), you should see an error message when loading a .hbs file. The reason is that you also need to change
<context id="html">
<context id="hbs">
near the bottom of the file.

P.S. I would probably use “Handlebar” for the name and “handlebar” for the id based on other languages.

Hi Chris,

Thanks again: it works now!

I changed the id of the section element as you described.

But after that I got two other errors:
unknown context “css:embedded-lang-hook”
unknown context “js:embedded-lang-hooks”

I simply removed the code blocks belonging to those errors :slight_smile: and now it works!

Thanks for helping me!

Scott Trakker

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.