Anyone have multiple language syntax highlighting with treesitter
working?
reddit / emacs
----------------------------------------------------------------------
zQpNB · 2022-10-13 21:10
I can't find much information on it.
I have javascript and/or typescript files that have html in them. This
is pretty common now, using tagged templates to make html.
let header = (title) => html`
${title}
`;
I had this working, kind of, with mmm mode a long time ago. That was
before tree-sitter and lsp.
some examples:
[https://lit.dev/docs/v1/lit-html/concepts/#template-
creation](https://lit.dev/docs/v1/lit-html/concepts/#template-
creation)
[https://github.com/WebReflection/uhtml](https://github.com/WebReflect
ion/uhtml)
[https://github.com/developit/htm](https://github.com/developit/htm)
[https://marketplace.visualstudio.com/items?itemName=bierner.lit-
html](https://marketplace.visualstudio.com/items?itemName=bierner.lit-
html)
[https://github.com/MaxMEllon/vim-jsx-
pretty](https://github.com/MaxMEllon/vim-jsx-pretty)
----------------------------------------------------------------------
orzechod · 2022-10-14 00:36
it's not a general-purpose multi-language solution, but [tsx-
mode](https://github.com/orzechowskid/tsx-mode.el) (disclaimer: I'm
the author) tries to support TSX plus a few flavors of CSS-in-JS. I
use it every day at work and I'd be curious to know if it suits your
needs.
----------------------------------------------------------------------
zQpNB · 2022-10-14 02:02
Awesome! It doesn't do what exactly what I need, but it's an example
of how to do it. I think.
----------------------------------------------------------------------
zQpNB · 2022-10-14 02:23
Would you want a html-in-js feature in your repo? :)
This will be torture for me to get good enough at emacs lisp to port.
haha.
Do the imported graphql mode and css mode use treesitter? It doesn't
look like it maybe.
----------------------------------------------------------------------
orzechod · 2022-10-14 13:35
tree-sitter is used for indentation and syntax highlighting of the
JS/TS buffer, as well as for CSS-in-JS but not for GQL-in-JS. a bunch
of magic is also done by copying the contents of your template strings
into hidden buffers and doing stuff like autocompletion there.
adding support for HTML-in-JS to the current version of that major
mode would probably involve defining a few tree-sitter queries to
identify relevant template strings, and then basically copying what's
being done for GQL in terms of hidden buffers, fontification, etc. it
should be pretty straightforward.
but tbh the whole thing can be rewritten to be a lot cleaner now that
[treesit is to be shipped with the next major version of
emacs](https://lists.gnu.org/archive/html/emacs-
devel/2022-10/msg00707.html). I've already started that work and it's
going well and I don't see any roadblocks to adding HTML-in-JS support
to it (not something I've used at work and so hadn't considered adding
support for). thanks for the suggestion!
----------------------------------------------------------------------
zQpNB · 2022-10-14 15:17
whoa this is all great news
----------------------------------------------------------------------
ExistentialTowel · 2022-10-26 22:12
I'd love to know how you ultimately solve this. I use the Lit
framework at work and have had to resort to using WebStorm to do dev
work (or pull the html template strings into a buffer with html-mode).
I'll say that today I found out you can use lsp-mode + ts-ls lang
server and it'll at least make it bearable. Without it you don't even
get matching pairs or indentation, but with ts-ls you get that plus
some basic code-completion/defintions and even a little bit of error
checking.
----------------------------------------------------------------------
zQpNB · 2022-10-26 22:22
Haven't done anything yet. Can only spend so much time futzing with
emacs.
tsx-mode looks great but i haven't even tried that yet, and I use jsx
at work.
Let us know if you find or do anything similar.