An extension for the Zed text editor to highlight according to the corresponding theme color comments beginning with:
- TODO:, WIP: (
constant) - INFO:, NOTE:, XXX:, DOCS:, PERF:, TEST: (
string) - ERROR:, FIXME:, BUG: (
property) - WARN:, HACK:, WARNING:, FIX: (
keyword) - If the comment has a user in it (like
TODO(thedadams):), then they user will be highlighted asemphasis. - By default, anything after the
:is highlighted the same as the name (TODO,INFO,ERROR, etc). See Theme Overrides for customization.
Ideally, the coloring would be supported by definitions like comment.info and comment.warning, but those aren't officially supported by Zed themes. However, it is possible to customize these colors using the Theme Overrides below.
Search "comment" in extension page, and install it. See the Compatibility section for details on what is needed from each language for proper highlighting.
For languages that support multi-line comments, the extension will highlight consecutive lines with the same color. A line with no text in the comment will reset the parser.
For example, the text in the following comment will all be highlighted as a TODO comment.
/*
* TODO: This is a multi-line comment.
* It will be highlighted with the same color.
*/This comment has two blocks, the first will be highlighted as a TODO comment, and the second will be highlighted as a INFO comment.
/*
* TODO: This is a multi-line comment.
* It will be highlighted with the same color.
* HACK: This is highlighted the same as above and not as a HACK
* because there is no empty line between the two blocks.
*
* INFO: This is another multi-line comment.
* It will be highlighted with the same color.
*/This applies to multi-comment lines only. So, for example, the following would be highlighted as two separate blocks.
// TODO: This is a single-line comment and will be highlighted as a TODO.
// HACK: This is a single-line comment and will be highlighted as a HACK.This screenshot shows an illustration of this behavior:
This extension provides a new "language" called comment.
In order for comments to be properly highlighted, this language must be injected into other languages.
This will progressively be integrated for every language/language extension via pull request.
If in the meantime you want to enable it for a specific language extension:
| OS | Path |
|---|---|
| macOS | /Users/<username>/Library/Application Support/Zed/extensions/installed/ |
| Linux | ~/.local/share/zed/extensions/installed/ |
| Windows | %APPDATA%\Zed\extensions\installed\ |
Navigate to the language's directory and locate or create an injections.scm file. Add the language injection snippet below.
Note
In a single injections.scm file, only one of @content or @injections.content is allowed, never both.
Check which variant the existing file uses (if any) and use the same one.
((comment) @content
(#set! injection.language "comment"))((comment) @injections.content
(#set! injection.language "comment"))Important
Replace comment in ((comment) with the proper node name for the comment syntax in your target language. This varies per language (see examples below).
| Language | Relative Path | Node Name | Snippet |
|---|---|---|---|
| Scheme (.scm) | scheme/languages/scheme/injections.scm |
comment |
((comment) @content (#set! injection.language "comment")) |
Tip
You can add support for the built-in languages that don't inject the "comment" language yet by building Zed yourself after patching every language you want in zed/crates/languages/src.
See the Rust language support built into Zed as an example.
Note
You may have to restart the language server or Zed to get the injections to work properly. Also, you are likely to need to redo the edits made here any time the extension is updated. Because of this, it is highly recommended to submit a PR to the extension with the edits you are making.
The table below lists each language’s comment injection status: ✅ supported;
| Language | Supported | Pull request |
|---|---|---|
| Bash | ✅ | zed-industries/zed#39884 |
| C | ✅ | zed-industries/zed#39884 |
| Clojure | zed-extensions/clojure#13 | |
| C# | ✅ | N/A |
| C++ | ✅ | zed-industries/zed#39884 |
| Dart | zed-extensions/dart#35 | |
| Dockerfile | zed-extensions/dockerfile#25 | |
| Git Commit | ✅ | zed-industries/zed#39884 |
| Gleam | gleam-lang/zed-gleam#20 | |
| Go | ✅ | zed-industries/zed#39884 |
| Haskell | zed-extensions/haskell#7 | |
| HTML | ✅ | zed-industries/zed#39884 |
| Java | ✅ | N/A |
| Javascript | ✅ | zed-industries/zed#39884 |
| Kotlin | zed-extensions/kotlin#51 | |
| Make | caius/zed-make#27 | |
| Python | ✅ | zed-industries/zed#39884 |
| Rust | ✅ | zed-industries/zed#39714 |
| Scala | ✅ | N/A |
| Scheme | zed-extensions/scheme#5 | |
| Swift | zed-extensions/swift#43 | |
| Terraform/HCL | zed-extensions/terraform#7 | |
| TOML | zed-extensions/toml#2 | |
| TSX | ✅ | zed-industries/zed#39884 |
| TypeScript | ✅ | zed-industries/zed#39884 |
| YAML | ✅ | zed-industries/zed#39884 |
| Zig | ✅ | N/A |
Ideally, the colors for comments would be defined in themes by the comment.todo, comment.info, comment.warn, comment.error, and comment.user properties. However, these are not officially supported by Zed. Until they are, constant, string, property, keyword, and emphasis are used so that coloring works out of the box. There is really no rhyme or reason to these choices.
This extension uses a small hack to allow users to customize the colors used in comments without affecting the rest of the syntax highlighting. You can access your settings file via the command palette ("zed: Open Settings" - cmd-, on macOS, ctrl-, on Linux) and add a theme_overrides section.
Below is a complete example you can add to your Zed settings and modify to fit your needs. If your settings file already contains a theme_overrides object, you can add these entries to the appropriate theme.
{
"theme_overrides": {
"YourThemeName": {
"syntax": {
"constant.comment.todo": {
"color": "#4078f2ff"
// "background_color": "#00000000",
// "font_weight": "bold",
// "font_style": "italic"
},
"string.comment.info": {
"color": "#50a14fff"
// "background_color": "#00000000",
// "font_weight": "bold",
// "font_style": "italic"
},
"keyword.comment.warn": {
"color": "#c18401ff"
// "background_color": "#00000000",
// "font_weight": "bold",
// "font_style": "italic"
},
"property.comment.error": {
"color": "#ca1243ff"
// "background_color": "#00000000",
// "font_weight": "bold",
// "font_style": "italic"
},
"emphasis.comment.user": {
"color": "#000000dd"
// "background_color": "#00000000",
// "font_weight": "bold",
// "font_style": "italic"
}
}
}
}
}Note: Replace YourThemeName with the actual name of your active theme (e.g., "One Dark", "Ayu Light", etc.).
To explain how and why this works, we'll use constant.comment.todo as an example.
This extension defines the syntax color node as constant.comment.todo. Zed will look for a corresponding color in your theme or override for this name. If it finds one, it will use that color. If not, then it will use the color corresponding to constant.comment, if available. If that is not available, it will use the color corresponding to constant, which nearly every theme supports.
Therefore, by defining coloring for constant.comment.todo in your overrides, you can change the color and style of just the TODO and WIP comments.
The text after the : can also be customized by adding a .text after the corresponding color node. For example, if you want to change the color or style of the text corresponding to an ERROR: comment:
{
"theme_overrides": {
"YourThemeName": {
"syntax": {
"property.comment.error.text": {
"color": "#ff0000"
// "background_color": "#00000000",
// "font_weight": "bold",
// "font_style": "italic"
}
}
}
}
}Thanks to tree-sitter-comment grammar.