Skip to content

Instantly share code, notes, and snippets.

@mactep
Last active May 2, 2024 18:44
Show Gist options
  • Save mactep/430449fd4f6365474bfa15df5c02d27b to your computer and use it in GitHub Desktop.
Save mactep/430449fd4f6365474bfa15df5c02d27b to your computer and use it in GitHub Desktop.
Conceal html class attribute values using treesitter
-- THIS IS DEPRECATED, USE THE FILE BELOW
-- should get bufnr from autocmd or something
-- conceal only accepts one character
-- thanks to u/Rafat913 for many suggestions and tips
local namespace = vim.api.nvim_create_namespace("class_conceal")
local group = vim.api.nvim_create_augroup("class_conceal", { clear = true })
local conceal_html_class = function(bufnr)
local language_tree = vim.treesitter.get_parser(bufnr, "html")
local syntax_tree = language_tree:parse()
local root = syntax_tree[1]:root()
local query = vim.treesitter.parse_query(
"html",
[[
((attribute
(attribute_name) @att_name (#eq? @att_name "class")
(quoted_attribute_value (attribute_value) @class_value) (#set! @class_value conceal "…")))
]]
) -- using single character for conceal thanks to u/Rafat913
for _, captures, metadata in query:iter_matches(root, bufnr, root:start(), root:end_()) do
local start_row, start_col, end_row, end_col = captures[2]:range()
vim.api.nvim_buf_set_extmark(bufnr, namespace, start_row, start_col, {
end_line = end_row,
end_col = end_col,
conceal = metadata[2].conceal,
})
end
end
vim.api.nvim_create_autocmd({ "BufEnter", "BufWritePost", "TextChanged", "InsertLeave" }, {
group = group,
pattern = "*.html",
callback = function()
conceal_html_class(vim.api.nvim_get_current_buf())
end,
})
;; extends
((attribute
(attribute_name) @att_name (#eq? @att_name "class")
(quoted_attribute_value (attribute_value) @class_value) (#set! @class_value conceal "")))
@Moanrisy
Copy link

Moanrisy commented Dec 21, 2023

I have mine as a function which I call via an autocmd

I try some config in this gist but not working.
Then realize I'm using .jsx type

(currently trying olimorris one) try using in .html (it work, I feel so dumb just copyng paste the config without reading it properly)

then update the config with className too for jsx file and add the pattern in autocmd

  local query = vim.treesitter.query.parse(
    "html",
    [[
    ((attribute
        (attribute_name) @att_name (#any-of? @att_name "class" "className")
        (quoted_attribute_value (attribute_value) @class_value) (#set! @class_value conceal "…")))
    ]]
  )

@theIbraDev
Copy link

I have mine as a function which I call via an autocmd

I try some config in this gist but not working. Then realize I'm using .jsx type

(currently trying olimorris one) try using in .html (it work, I feel so dumb just copyng paste the config without reading it properly)

then update the config with className too for jsx file and add the pattern in autocmd

  local query = vim.treesitter.query.parse(
    "html",
    [[
    ((attribute
        (attribute_name) @att_name (#any-of? @att_name "class" "className")
        (quoted_attribute_value (attribute_value) @class_value) (#set! @class_value conceal "…")))
    ]]
  )

Thought id mention that you can have more patterns at once.

{ ".html", ".svelte", "*.jsx" }

@mactep
Copy link
Author

mactep commented Apr 3, 2024

For everyone using this gist, now you can drop the lua stuff and use only a query to set the conceal. Reference issue. PR that fixes the issue

How to:

  • Update neovim to use the fix (I'm using v0.10.0-dev-2424c3e)
  • Create the file after/queries/heex/highlights.scm
  • Paste the code below in it
;; extends

((attribute
        (attribute_name) @att_name (#eq? @att_name "class")
        (quoted_attribute_value (attribute_value) @class_value) (#set! @class_value conceal "…")))

Make sure you have the conceallevel option set.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment