Inconsistent highlighting of some declaration keywords between Typescript and TSX #48178
Description
Reproduction steps
- Create both a .ts and .tsx file
- Paste e.g. the following snippet into both
interface Foo {
bar: string;
}
enum Hello {
WORLD = "World!",
}- Observe the difference in syntax highlighting. Note that this mismatch only occurs when using a theme that specifies a color/font style for
keyword.declarationthat is different fromkeyword
If I understand correctly, this occurs because some of the declaration keywords, such as "enum" or "interface" appear both in the @keyword list and in the @keyword.declaration list in the highlights.scm for tsx. This is not the case for typescript.
Current vs. Expected behavior
 |
 |
|---|---|
| Inside .tsx file | Inside .ts file |
I would expect the highlighting to be the same for .ts and .tsx.
Zed version and system specs
Zed: v0.222.1+preview.139.70e275bd778cb7c54dd6ad1079737a7da731ca91 (Zed Preview)
OS: Linux X11 ubuntu 24.04
Memory: 31 GiB
Architecture: x86_64
GPU: NVIDIA GeForce RTX 3070 Ti || NVIDIA || 555.42.06
Attach Zed log file
Zed.log
Relevant Zed settings
settings.json
This is my theme. Note that there are different colors specified for `keyword.declaration` and `keyword`.{
"$schema": "https://zed.dev/schema/themes/v0.2.0.json",
"name": "One Monokai",
"author": "Luis",
"themes": [
{
"name": "One Monokai",
"appearance": "dark",
"style": {
"background": "#282c34",
"background.appearance": "opaque",
"border": "#181a1f",
"border.disabled": "#181a1f",
"border.focused": "#528bff",
"border.selected": "#181a1f",
"border.transparent": "#181a1f",
"border.variant": "#181a1f",
"conflict": "#e06c75",
"created": "#98c379",
"deleted": "#ff6188",
"drop_target.background": "#2f333d",
"editor.active_line.background": "#383e4a",
"editor.active_line_number": "#d7dae0",
"editor.active_wrap_guide": "#484848",
"editor.background": "#282c34",
"editor.document_highlight.read_background": "#3e4451",
"editor.foreground": "#abb2bf",
"editor.gutter.background": "#282c34",
"editor.line_number": "#495162",
"editor.subheader.background": "#21252b",
"editor.wrap_guide": "#484848",
"element.background": "#528bff",
"element.hover": "#292d35",
"element.selected": "#2c313a",
"element.disabled": "#495162",
"elevated_surface.background": "#1d1f23",
"error": "#c24038",
"error.background": "#21252b",
"error.border": "#181a1f",
"ghost_element.background": "#21252b",
"ghost_element.hover": "#292d35",
"ghost_element.selected": "#2c313a",
"ghost_element.disabled": "#495162",
"hidden": "#495162",
"hint": "#969696ff",
"hint.background": "#21252b",
"hint.border": "#181a1f",
"ignored": "#495162",
"info": "#528bff",
"info.background": "#21252b",
"info.border": "#181a1f",
"link_text.hover": "#528bff",
"modified": "#e5c07b",
"pane_group.border": "#181a1f",
"panel.background": "#21252b",
"panel.focused_border": "#528bff",
"players": [
{
"background": "#d7dae0",
"cursor": "#d7dae0",
"selection": "#d7dae01a"
},
{
"background": "#ff6188",
"cursor": "#ff6188",
"selection": "#ff61881a"
},
{
"background": "#98c379",
"cursor": "#98c379",
"selection": "#98c3791a"
},
{
"background": "#e5c07b",
"cursor": "#e5c07b",
"selection": "#e5c07b1a"
},
{
"background": "#528bff",
"cursor": "#528bff",
"selection": "#528bff1a"
},
{
"background": "#c678dd",
"cursor": "#c678dd",
"selection": "#c678dd1a"
},
{
"background": "#56b6c2",
"cursor": "#56b6c2",
"selection": "#56b6c21a"
}
],
"predictive": "#969696ff",
"scrollbar.thumb.background": "#4e566680",
"scrollbar.thumb.border": "#4e566680",
"scrollbar.thumb.hover_background": "#5a637580",
"scrollbar.track.background": "#282c34",
"scrollbar.track.border": "#181a1f",
"search.match_background": "#42557b",
"status_bar.background": "#21252b",
"surface.background": "#1d1f23",
"syntax": {
"attribute": {
"color": "#98c379",
"font_style": null,
"font_weight": null
},
"boolean": {
"color": "#56b6c2",
"font_style": null,
"font_weight": null
},
"comment": {
"color": "#676f7d",
"font_style": "italic",
"font_weight": null
},
"comment.doc": {
"color": "#676f7d",
"font_style": "italic",
"font_weight": null
},
"constant": {
"color": "#56b6c2",
"font_style": null,
"font_weight": null
},
"constructor": {
"color": "#e06c75",
"font_style": null,
"font_weight": null
},
"embedded": {
"color": "#dce0e5ff",
"font_style": null,
"font_weight": null
},
"emphasis": {
"color": "#74ade8ff",
"font_style": null,
"font_weight": null
},
"emphasis.strong": {
"color": "#bf956aff",
"font_style": null,
"font_weight": 700
},
"enum": {
"color": "#d07277ff",
"font_style": null,
"font_weight": null
},
"function": {
"color": "#98c379",
"font_style": null,
"font_weight": null
},
"hint": {
"color": "#788ca6ff",
"font_style": null,
"font_weight": null
},
"keyword": {
"color": "#e06c75",
"font_style": null,
"font_weight": null
},
"label": {
"color": "#74ade8ff",
"font_style": null,
"font_weight": null
},
"link_text": {
"color": "#73ade9ff",
"font_style": "normal",
"font_weight": null
},
"link_uri": {
"color": "#6eb4bfff",
"font_style": null,
"font_weight": null
},
"namespace": {
"color": "#dce0e5ff",
"font_style": null,
"font_weight": null
},
"number": {
"color": "#c678dd",
"font_style": null,
"font_weight": null
},
"operator": {
"color": "#e06c75",
"font_style": null,
"font_weight": null
},
"predictive": {
"color": "#5a6a87ff",
"font_style": "italic",
"font_weight": null
},
"preproc": {
"color": "#dce0e5ff",
"font_style": null,
"font_weight": null
},
"primary": {
"color": "#acb2beff",
"font_style": null,
"font_weight": null
},
"property": {
"color": "#acb2beff",
"font_style": null,
"font_weight": null
},
"punctuation": {
"color": "#abb2bf",
"font_style": null,
"font_weight": null
},
"punctuation.bracket": {
"color": "#abb2bf",
"font_style": null,
"font_weight": null
},
"punctuation.delimiter": {
"color": "#abb2bf",
"font_style": null,
"font_weight": null
},
"punctuation.list_marker": {
"color": "#abb2bf",
"font_style": null,
"font_weight": null
},
"punctuation.markup": {
"color": "#d07277ff",
"font_style": null,
"font_weight": null
},
"punctuation.special": {
"color": "#abb2bf",
"font_style": null,
"font_weight": null
},
"selector": {
"color": "#dfc184ff",
"font_style": null,
"font_weight": null
},
"selector.pseudo": {
"color": "#74ade8ff",
"font_style": null,
"font_weight": null
},
"string": {
"color": "#e5c07b",
"font_style": null,
"font_weight": null
},
"string.escape": {
"color": "#56b6c2",
"font_style": null,
"font_weight": null
},
"string.regex": {
"color": "#e5c07b",
"font_style": null,
"font_weight": null
},
"string.special": {
"color": "#e5c07b",
"font_style": null,
"font_weight": null
},
"string.special.symbol": {
"color": "#e5c07b",
"font_style": null,
"font_weight": null
},
"tag": {
"color": "#e06c75",
"font_style": null,
"font_weight": null
},
"text.literal": {
"color": "#e5c07b",
"font_style": null,
"font_weight": null
},
"title": {
"color": "#d07277ff",
"font_style": null,
"font_weight": 400
},
"type": {
"color": "#61afef",
"font_style": null,
"font_weight": null
},
"variable": {
"color": "#acb2beff",
"font_style": null,
"font_weight": null
},
"variable.special": {
"color": "#e06c75",
"font_style": null,
"font_weight": null
},
"variable.parameter": {
"color": "#d19a66",
"font_style": "italic"
},
"variant": {
"color": "#73ade9ff",
"font_style": null,
"font_weight": null
},
"type.builtin": {
"color": "#56b6c2",
"font_style": null,
"font_weight": null
},
"function.method": {
"color": "#98c379",
"font_style": null,
"font_weight": null
},
"function.kwargs": {
"color": "#d19a66",
"font_style": "italic"
},
"keyword.definition": {
"color": "#56b6c2",
"font_style": null,
"font_weight": null
},
"keyword.declaration": {
"color": "#56b6c2",
"font_style": null,
"font_weight": null
},
"property.json_key": {
"color": "#56b6c2",
"font_style": null,
"font_weight": null
}
},
"tab.active_background": "#383e4a",
"tab.inactive_background": "#21252b",
"tab_bar.background": "#21252b",
"terminal.ansi.black": "#2d3139",
"terminal.ansi.blue": "#528bff",
"terminal.ansi.bright_black": "#7f848e",
"terminal.ansi.bright_blue": "#528bff",
"terminal.ansi.bright_cyan": "#56b6c2",
"terminal.ansi.bright_green": "#98c379",
"terminal.ansi.bright_magenta": "#7e0097",
"terminal.ansi.bright_red": "#f44747",
"terminal.ansi.bright_white": "#d7dae0",
"terminal.ansi.bright_yellow": "#e5c07b",
"terminal.ansi.cyan": "#56b6c2",
"terminal.ansi.green": "#98c379",
"terminal.ansi.magenta": "#c678dd",
"terminal.ansi.red": "#e06c75",
"terminal.ansi.white": "#d7dae0",
"terminal.ansi.yellow": "#e5c07b",
"terminal.background": "#282c34",
"terminal.foreground": "#abb2bf",
"text": "#d7dae0",
"text.accent": "#528bff",
"text.muted": "#9da5b4",
"title_bar.background": "#282c34",
"title_bar.inactive_background": "#282c34",
"title_bar.inactive_foreground": "#6b717d",
"toolbar.background": "#282c34",
"warning": "#e5c07b",
"warning.background": "#21252b",
"warning.border": "#181a1f"
}
}
],
"id": "QuHZYxd--7zQOa84RY55N"
}
Relevant Keymap
keymap.json
(for AI issues) Model provider details
No response
If you are using WSL on Windows, what flavor of Linux are you using?
None