Syntax Highlighting in Clientside Callbacks Using TreeSitter

Dash Python
,
1

New Year, new me + it’s time to start blogging about stuff.

With that said, last year, I found a really nice way to get syntax highlighting working in clientside callbacks using TreeSitter.

You can read my full thoughts here, but the treesitter injection I use is

;extends
; look for calls to functions named clientside_callback
(call 
  (identifier) @name (#eq? @name clientside_callback) 
  (argument_list 
; if the first argument is a string, 
; set the language of the child string_content to javascript
((string (string_content) 
	 @injection.content 
	 (#set! injection.include-children)
	 (#set! injection.language "javascript")))
)
)

Before Injection:

dash-clientside-nts
dash-clientside-nts3795×1931 208 KB

After Injection:

dash-clientside-ts
dash-clientside-ts3790×1992 234 KB

1 Like
2

Have a few updates to this:

  1. I got it working in VS Code. You can install the plugin the usual way through the extension marketplace
  2. I added support for syntax highlighting in ag grid inline function declarations
    image
    image1398×777 88.8 KB

Would appreciate any feedback/requests for further enhancements! My next goal is to see if I can get prettier to run on the inline functions (this works in neovim if you are using conform.nvim).

3

Amazing! Do you know, by chance, if this is possible to achieve the same for Sublime Text ? I’m a bit old school and still use it… (one of the best lightweight and fast editors in my opinion).

4

Possibly, but I don’t think it will be using Tree-Sitter.

There is a tree-sitter plugin for sublime (linked), but it explicitly does not support language injections (at the bottom of the README).

If you wanted to cook something similar up, I would probably start here and go to the sublime text source as well to see what their python grammar looks like.

There’s an example in the previous link if you ctrl+f “embedding another syntax”

1 Like