Nunjucks / *.njk syntax highlighting

[alexokten]

Is there a way to have syntax highlighting for Nunjucks files?

[the-mikedavis]

It isn't currently a supported language. See https://docs.helix-editor.com/master/guides/adding_languages.html

There are some jinja2 tree-sitter grammars that could be used: https://github.com/search?q=tree-sitter-jinja2. (From what I understand, nunjucks is syntactically the same as jinja2.)

[vanarok]

I'm sharing my configuration for nunjucks (it can also be adapted to jinja2):

[[language]]
name = "njk"
scope = "text.html.njk"
injection-regex = "njk"
file-types = ["njk"]
roots = []
formatter = { command = 'djlint', args = ["-", "--profile", "nunjucks", "--reformat"] }
auto-format = true
indent = { tab-width = 2, unit = "  " }
grammar = "jinja2"

[[grammar]]
name = "jinja2"
source = { git = "https://github.com/varpeti/tree-sitter-jinja2.git", rev = "a533cd3c33aea6acb0f9bf9a56f35dcfe6a8eb53" }

remember to move highlight.scm from the "source" repository to the helix/runtime/queries/njk folder
and install a djlint formatter if you want a nice-looking template.

Also need to update grammar hx --grammar fetch && hx --grammar build

for html highlighting in templates add injections.scm file to path helix/runtime/queries/njk:

((source_file) @injection.content
 (#set! injection.combined)
 (#set! injection.include-children)
 (#set! injection.language "html"))

[perroboc]

Thank you for this. But what highlight.scm file are you talking about?

The hightlight.scm file is located in the project´s repo.

hightlight.scm and injections.scm, at least in my case, go to .config/helix/runtime/queries/njk.

[YeungOnion]

Might I ask how I might get the appropriate behavior to expand/shrink/jump to syntax node behavior to include html nodes? I'm using helix 23.05 (7f5940b)

The behavior I observe is that jumps to the next nunjucks node that isn't html. Below, the v matches the selected characters before a "go to next syntax node" and the ^ is where it jumps to after "go to next syntax node".

                                              vvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
<li class="nav-item"><a href="{{ entry.url }}"{% if entry.url == page.url %} aria-current="page"{% endif %}>{{ entry.title }}</a></li>
                                                                                                ^^^^^^^^^^^

Highlighting looks good for those unmatched html nodes (key, operator, quoted-value) are appropriate colors. So I'm not sure if I just don't have the injection query proper

---

Potentially useful output.

~ ❱ command cat ~/.config/helix/runtime/queries/njk/{injections.scm,highlights.scm}
((source_file) @injection.content
 (#set! injection.combined)
 (#set! injection.include-children)
 (#set! injection.language html))
(expression) @string
(statement) @variable.builtin
(keyword) @keyword
(comment) @comment
(identifier) @parameter
(operator) @operator
(string) @string