finico
bd6dadaa0b
Syntax highlighting and its customization are very important to many developers, including me. I've looked through a number of issues and discussions on this topic and haven't found any active PRs. Currently, there's no way to customize highlighting for custom JSX tags, as they use `@type`. Since TSX has a particularly complex syntax and can often contain types/aliases/generics/tags in a dense sequence, they all blends into a single color and makes it difficult to "parse" by eyes. To avoid proposing something arbitrary, I looked into how this is done elsewhere. - VS Code `support.class.component.tsx` [TypeScriptReact.tmLanguage.json](https://github.com/microsoft/vscode/blob/724656efa2c26ab6e7eb2023426dcf2658dc3203/extensions/typescript-basics/syntaxes/TypeScriptReact.tmLanguage.json#L5802) But it relies on both legacy [tmLanguage naming conventions](https://macromates.com/manual/en/language_grammars#:~:text=rarely%20be%20used\).-,support,-%E2%80%94%20things%20provided%20by) and the outdated assumption that React components are always classes. - ReScript `@tag` [rescript-zed](https://github.com/rescript-lang/rescript-zed/blob/b3930c1754ab2762938244546ea2c7fb97d01cb3/languages/rescript/highlights.scm#L277) It's not entirely correct to just use a `@tag` - it's better to distinguish JSX Intrinsic Elements from custom ones. - Vue `@tag @tag.component.type.constructor` [zed-extensions/vue](https://github.com/zed-extensions/vue/blob/2697588c5cde11375d47f53f9449af8e32600d81/languages/vue/highlights.scm#L9C21-L9C52) - Svelte `@tag @tag.component.type.constructor` [zed-extensions/svelte](https://github.com/zed-extensions/svelte/blob/ae381a1217d14c26cbedfaf84b0a2f5ae508f40c/languages/svelte/highlights.scm#L46C21-L46C52) The similarity between Vue and Svelte implementations (perhaps one borrowed from the other) didn't seem coincidental and the approach felt appropriate. **I decided to adopt the same one to maintain consistency for theme creators.** So, how it looks: **Release (0.224.9) version** <img width="440" height="220" alt="zed-one-release" src="https://github.com/user-attachments/assets/6f8726c5-a17e-4387-941c-69e5c1569049" /> **Local version with changes** - no breaking changes for builtin themes - uses `type` color as before and can be changed in themes separately if needed <img width="440" height="220" alt="zed-one-local" src="https://github.com/user-attachments/assets/a11cc5ed-20fc-45d2-8ebd-a908503999c3" /> **Local version with changes and theme overrides** <img width="440" height="220" alt="zed-one-with-overrides" src="https://github.com/user-attachments/assets/1997bd5b-7fa4-4346-8338-b5d61e9e832b" /> With these changes in the config: ```jsonc "theme_overrides": { "One Light": { "syntax": { // "tag.component" also matches "type.component": { "color": "#d3604fff", }, }, }, }, ``` I'm pretty sure this will help many developers enjoy Zed even more. Release Notes: - Improved syntax highlighting for custom jsx elements in TSX and JavaScript languages. Theme authors and users can now highlight these in their theme/theme overrides using `tag.component.jsx`
Zed
Welcome to Zed, a high-performance, multiplayer code editor from the creators of Atom and Tree-sitter.
Installation
On macOS, Linux, and Windows you can download Zed directly or install Zed via your local package manager (macOS/Linux/Windows).
Other platforms are not yet available:
- Web (tracking issue)
Developing Zed
Contributing
See CONTRIBUTING.md for ways you can contribute to Zed.
Also... we're hiring! Check out our jobs page for open roles.
Licensing
License information for third party dependencies must be correctly provided for CI to pass.
We use cargo-about to automatically comply with open source licenses. If CI is failing, check the following:
- Is it showing a
no license specifiederror for a crate you've created? If so, addpublish = falseunder[package]in your crate's Cargo.toml. - Is the error
failed to satisfy license requirementsfor a dependency? If so, first determine what license the project has and whether this system is sufficient to comply with this license's requirements. If you're unsure, ask a lawyer. Once you've verified that this system is acceptable add the license's SPDX identifier to theacceptedarray inscript/licenses/zed-licenses.toml. - Is
cargo-aboutunable to find the license for a dependency? If so, add a clarification field at the end ofscript/licenses/zed-licenses.toml, as specified in the cargo-about book.
Sponsorship
Zed is developed by Zed Industries, Inc., a for-profit company.
If you’d like to financially support the project, you can do so via GitHub Sponsors. Sponsorships go directly to Zed Industries and are used as general company revenue. There are no perks or entitlements associated with sponsorship.