search

zed-industries / zed

Code at the speed of thought – Zed is a high-performance, multiplayer code editor from the creators of Atom and Tree-sitter.
https://zed.dev
Other
48.51k stars 2.9k forks source link

Sub-language support #5184

Closed tbeseda closed 1 month ago

tbeseda commented 2 years ago

Check for existing issues

Language

Langs in a JS tagged template literal: HTML, CSS, JS

Tree Sitter parser link

No response

Language server link

No response

Misc notes

I'm unsure, but I believe this would need to be a separate JS parser :/

Tree Sitter doc: http://tree-sitter.github.io/tree-sitter/using-parsers#multi-language-documents

Comparison screenshot

Here, the JS parser sees the html method name and invokes (or has its own?) HTML parser for the tagged template literal. And then the HTML parser even uses a CSS parser when encountering a <style> tag.

VS Code
Zed image

DeviousM commented 4 months ago

This thing is one of 2 things that is holding me back from switching to zed. This and custom icons in the file explorer 😅 It'd be awesome to see sublanguage support in a finite future as it's quite a part of a modern frontend, whether we like it or not.

Considering we already have language highlighting in markdown it feels like it shouldn't be that hard to implement for other languages, no?

zkat commented 3 months ago

https://github.com/tree-sitter/tree-sitter-javascript/issues/163 suggests that the javascript tree sitter syntax already supports this? somehow? as long as you have html installed?

aretrace commented 2 months ago

this is so needed! js has had tagged template literals since es6 and has grown an ecosystem of libraries that use them. it looks like python could be next.

cipopescu-dev commented 2 months ago

Perhaps this feature should be added as an extension (see vscode lit-html) but it's definitely needed! super useful!

XiNiHa commented 1 month ago

Actually it looks like the language injection feature itself is already present. What is missing right now is the interface for extensions to extend existing language queries. I guess the implementation itself will be somewhat straightforward if we have consensus on the interface design.

cipopescu-dev commented 1 month ago

This feature was added with release 0.149.3 Thanks a lot Zed team! ❤️

Added syntax highlighting for tagged template literals in javascript, typescript and tsx languages for css, html, js, json, sql, ts, yaml and yml (#15984; thanks RobinMalfait).

XiNiHa commented 1 month ago

@mrnugget Would you prefer to have the feature I mentioned above tracked as a separate issue?

mrnugget commented 1 month ago

You mean adding an extensions API to change the queries? Yeah, I think a separate issue for that is good.

tbeseda commented 1 month ago

This is rad. I am seeing the nested languages in ECMAScript now:

image

Thanks, team!

JAForbes commented 1 month ago

I'm seeing highlighting for html but not sql, is there something extra I need to configure first?

XiNiHa commented 1 month ago

Have you installed the SQL extension?

JAForbes commented 1 month ago

Hey nice! thank you!