LSP for nested languages?

Language Server Protocol (LSP)
1

I spend a lot of my day job working with Typescript and Web Components (specifically lit.dev), which leads to a lot of code blocks using nested languages within template literals (example).

Treesitter is fantastic at identifying the languages involved, and can automatically infer the necessary syntax highlighting, etc. However, I can’t find any way to allow the LSP to interact, and thus lose Cmp support, syntax error highlighting, etc.

I’ve tried manually starting the LSP, however I think that because the filetype of the overall buffer doesn’t match, it won’t attach. Is there any way I can have LSP kick in for just the tagged literals, to get native CSS language support in my css literals and HTML language support inside the html literals?

I’ve tried doing some googling, but most results are either a) irrelevant, b) reddit-blackout-ed, or c) both. Thanks!

2

As a sidenote, I’ve found a couple of plugins which will open the fenced code in a new buffer with the LSP attached. Whilst I understand this as a workaround, it feels extremely hackish and I’m not satisifed with it (to the point I’d rather go without :sob:). It would be so great if we could send off just the relevant code blocks to the LSP without needing a new environment!

3

I’ve just found the VSCode docs on embedded languages (a phrase I hadn’t thought to search); if my searches don’t turn up anything specific, it seems pretty well documented to perhaps investigate coding something up.

4

It doesn’t look like it would be a drop in solution for you, but I’m pretty sure this is the kind of thing otter.nvim aims to solve.