How do highlight links in HTML using treesitter queries?

[David-Else]

I am trying to update the HTML treesitter highlights but have become stuck. I want to highlight just the links inside href and src, in Neovim it is:

https://github.com/nvim-treesitter/nvim-treesitter/blob/master/queries/html_tags/highlights.scm

((attribute
  (attribute_name) @_attr
  (quoted_attribute_value
    (attribute_value) @string.special.url))
  (#any-of? @_attr "href" "src")
  (#set! @string.special.url url @string.special.url))

but this is not working in Helix and causes the highlighting to crash.

In the Helix svelte highlights we have:

((attribute
   (attribute_name) @_attr
   (quoted_attribute_value (attribute_value) @markup.link.url))
 (#match? @_attr "^(href|src)$"))

but that does nothing in HTML. I am stuck, I have tried to see if it works on different themes in case mine has problems. but I am not seeing anything change for href of src.

[the-mikedavis]

I'm not sure what the #set! is doing in neovim's query. That part can be left off. I see this working and I think the svelte queries can be updated to use this too:

((attribute
  (attribute_name) @attribute
  (quoted_attribute_value (attribute_value) @markup.link.url))
 (#any-of? @attribute "href" "src"))

(when those queries were written for svelte we didn't support #any-of?)

[David-Else]

@the-mikedavis thanks for the quick reply! Afraid I can't make what you suggested work, what theme are you using? Here is my work so far including your suggestion:

(tag_name) @tag
(erroneous_end_tag_name) @tag.error
(doctype) @constant
(attribute_name) @attribute
(comment) @comment

[
  "\""
  (attribute_value)
] @string

((element
  (start_tag
    (tag_name) @_tag)
  (text) @markup.bold)
  (#any-of? @_tag "strong" "b"))

((element
  (start_tag
    (tag_name) @_tag)
  (text) @markup.italic)
  (#any-of? @_tag "em" "i"))

((element
  (start_tag
    (tag_name) @_tag)
  (text) @markup.strikethrough)
  (#any-of? @_tag "s" "del"))

((attribute
  (attribute_name) @attribute
  (quoted_attribute_value (attribute_value) @markup.link.url))
 (#any-of? @attribute "href" "src"))

[
  "<"
  ">"
  "</"
  "/>"
  "<!"
] @punctuation.bracket

"=" @punctuation.delimiter

[the-mikedavis]

I think there's a precedence issue: the (attribute_value) on L9 (which tags it as @string) ends up taking precedence over the later pattern. If you reorganize that to be higher I see it highlighting with the link style.

(tag_name) @tag
(erroneous_end_tag_name) @tag.error
(doctype) @constant
(attribute_name) @attribute
(comment) @comment

((attribute
  (attribute_name) @attribute
  (quoted_attribute_value (attribute_value) @markup.link.url))
 (#any-of? @attribute "href" "src"))

[
  "\""
  (attribute_value)
] @string

((element
  (start_tag
    (tag_name) @_tag)
  (text) @markup.bold)
  (#any-of? @_tag "strong" "b"))

((element
  (start_tag
    (tag_name) @_tag)
  (text) @markup.italic)
  (#any-of? @_tag "em" "i"))

((element
  (start_tag
    (tag_name) @_tag)
  (text) @markup.strikethrough)
  (#any-of? @_tag "s" "del"))

[
  "<"
  ">"
  "</"
  "/>"
  "<!"
] @punctuation.bracket

"=" @punctuation.delimiter

For reference though I keep my theme here: https://github.com/the-mikedavis/dotfiles/blob/main/colorschemes/helix/grv.toml

[David-Else]

It works!!! Thanks for the explanation.