Improve Markdown highlighting (#37669)

chbk created 2 months ago

Release Notes:

  - Improved Markdown syntax highlighting
  
  
PR #25330 raised concerns about breaking changes, so I split it into two
PRs:
- This PR improves highlighting without deprecating existing selectors.
- PR #37670 is based on this PR and introduces new Markdown selectors.

| Zed 0.202.7 | With this PR |
| --- | --- |
| <img width="800" height="1080" alt="md-0 202 7"
src="https://github.com/user-attachments/assets/0b0b5920-32ed-454f-bc3b-bf5cd0a9086a"
/> | <img width="800" height="1080" alt="md-pr"
src="https://github.com/user-attachments/assets/a5923a2e-391e-4e09-a60b-1a142f9378f3"
/> |

Changes to include the `markup` selector, conforming to
[Neovim](https://github.com/nvim-treesitter/nvim-treesitter/blob/38e46a6d7ade5c8718f77b2b9fd98a0f7ab32c1e/queries/markdown/highlights.scm#L59),
[VS
Code](https://github.com/microsoft/vscode/blob/dfad570d15959a6ce7210a313a1190e76e8fe2e2/extensions/markdown-basics/syntaxes/markdown.tmLanguage.json#L60),
[Atom](https://github.com/atom/language-gfm/blob/6686ac6ccca2632af24d5c200f85bcd80b9fa752/grammars/gfm.json#L147),
and [Zed
itself](https://github.com/zed-industries/zed/blob/1e255e41ccfdb88e2266469f1ccfe0d41533280b/crates/languages/src/gitcommit/highlights.scm#L1).

- `paragraph`, `indented_code_block`, `pipe_table`: `text`
- `# Heading`: `title` -> `title.markup`
- `-`, `1.`, `>`, `|`: `punctuation.markup`
- ```` ``` ````: `punctuation.embedded.markup`
- `[1]: url.com`, `[link](url.com)`: `link_text.markup`
- `url.com`: `link_uri` -> `link_uri.markup`
- `*italic*`: `emphasis` -> `emphasis.markup`
- `**bold**`: `emphasis.strong` -> `emphasis.strong.markup`
- ``` `raw` ```: `text.literal` -> `text.literal.markup`
- `~~strikethrough~~`: `strikethrough.markup`

````md

# Heading

Some stylized text:
- `raw`
- *italic*
- ~strike~
- **strong**

> quoted

```python
print("some code")
```

1. Here is an ![image](image.jpg)
2. A [link](https://github.com/zed-industries)
3. And even a [referenced link][1]

[1]: https://zed.dev

| tables | are |
| --- | --- |
| properly | scoped |

````

Change summary

assets/themes/ayu/ayu.json                          | 15 +++++++
assets/themes/gruvbox/gruvbox.json                  | 30 +++++++++++++++
assets/themes/one/one.json                          | 10 +++++
crates/languages/src/markdown-inline/highlights.scm | 28 +++++++++++---
crates/languages/src/markdown/highlights.scm        | 28 +++++++++++--
5 files changed, 100 insertions(+), 11 deletions(-)

Detailed changes

assets/themes/ayu/ayu.json

@@ -316,6 +316,11 @@
             "font_style": null,
             "font_weight": null
           },
+          "punctuation.markup": {
+            "color": "#a6a5a0ff",
+            "font_style": null,
+            "font_weight": null
+          },
           "punctuation.special": {
             "color": "#d2a6ffff",
             "font_style": null,
@@ -702,6 +707,11 @@
             "font_style": null,
             "font_weight": null
           },
+          "punctuation.markup": {
+            "color": "#73777bff",
+            "font_style": null,
+            "font_weight": null
+          },
           "punctuation.special": {
             "color": "#a37accff",
             "font_style": null,
@@ -1088,6 +1098,11 @@
             "font_style": null,
             "font_weight": null
           },
+          "punctuation.markup": {
+            "color": "#b4b3aeff",
+            "font_style": null,
+            "font_weight": null
+          },
           "punctuation.special": {
             "color": "#dfbfffff",
             "font_style": null,

assets/themes/gruvbox/gruvbox.json

@@ -325,6 +325,11 @@
             "font_style": null,
             "font_weight": null
           },
+          "punctuation.markup": {
+            "color": "#83a598ff",
+            "font_style": null,
+            "font_weight": null
+          },
           "punctuation.special": {
             "color": "#e5d5adff",
             "font_style": null,
@@ -725,6 +730,11 @@
             "font_style": null,
             "font_weight": null
           },
+          "punctuation.markup": {
+            "color": "#83a598ff",
+            "font_style": null,
+            "font_weight": null
+          },
           "punctuation.special": {
             "color": "#e5d5adff",
             "font_style": null,
@@ -1125,6 +1135,11 @@
             "font_style": null,
             "font_weight": null
           },
+          "punctuation.markup": {
+            "color": "#83a598ff",
+            "font_style": null,
+            "font_weight": null
+          },
           "punctuation.special": {
             "color": "#e5d5adff",
             "font_style": null,
@@ -1525,6 +1540,11 @@
             "font_style": null,
             "font_weight": null
           },
+          "punctuation.markup": {
+            "color": "#066578ff",
+            "font_style": null,
+            "font_weight": null
+          },
           "punctuation.special": {
             "color": "#413d3aff",
             "font_style": null,
@@ -1925,6 +1945,11 @@
             "font_style": null,
             "font_weight": null
           },
+          "punctuation.markup": {
+            "color": "#066578ff",
+            "font_style": null,
+            "font_weight": null
+          },
           "punctuation.special": {
             "color": "#413d3aff",
             "font_style": null,
@@ -2325,6 +2350,11 @@
             "font_style": null,
             "font_weight": null
           },
+          "punctuation.markup": {
+            "color": "#066578ff",
+            "font_style": null,
+            "font_weight": null
+          },
           "punctuation.special": {
             "color": "#413d3aff",
             "font_style": null,

assets/themes/one/one.json

@@ -321,6 +321,11 @@
             "font_style": null,
             "font_weight": null
           },
+          "punctuation.markup": {
+            "color": "#d07277ff",
+            "font_style": null,
+            "font_weight": null
+          },
           "punctuation.special": {
             "color": "#b1574bff",
             "font_style": null,
@@ -715,6 +720,11 @@
             "font_style": null,
             "font_weight": null
           },
+          "punctuation.markup": {
+            "color": "#d3604fff",
+            "font_style": null,
+            "font_weight": null
+          },
           "punctuation.special": {
             "color": "#b92b46ff",
             "font_style": null,

crates/languages/src/markdown-inline/highlights.scm

@@ -1,6 +1,22 @@
-(emphasis) @emphasis
-(strong_emphasis) @emphasis.strong
-(code_span) @text.literal
-(link_text) @link_text
-(link_label) @link_text
-(link_destination) @link_uri
+(emphasis) @emphasis.markup
+(strong_emphasis) @emphasis.strong.markup
+(code_span) @text.literal.markup
+(strikethrough) @strikethrough.markup
+
+[
+  (inline_link)
+  (shortcut_link)
+  (collapsed_reference_link)
+  (full_reference_link)
+  (image)
+  (link_text)
+  (link_label)
+] @link_text.markup
+
+(inline_link ["(" ")"] @link_uri.markup)
+(image ["(" ")"] @link_uri.markup)
+[
+  (link_destination)
+  (uri_autolink)
+  (email_autolink)
+] @link_uri.markup

crates/languages/src/markdown/highlights.scm

@@ -1,7 +1,15 @@
+[
+  (paragraph)
+  (indented_code_block)
+  (pipe_table)
+] @text
+
 [
   (atx_heading)
   (setext_heading)
-] @title
+  (thematic_break)
+] @title.markup
+(setext_heading (paragraph) @title.markup)
 
 [
   (list_marker_plus)
@@ -9,8 +17,18 @@
   (list_marker_star)
   (list_marker_dot)
   (list_marker_parenthesis)
-] @punctuation.list_marker
+] @punctuation.list_marker.markup
+
+(block_quote_marker) @punctuation.markup
+(pipe_table_header "|" @punctuation.markup)
+(pipe_table_row "|" @punctuation.markup)
+(pipe_table_delimiter_row "|" @punctuation.markup)
+(pipe_table_delimiter_cell "-" @punctuation.markup)
+
+[
+  (fenced_code_block_delimiter)
+  (info_string)
+] @punctuation.embedded.markup
 
-(fenced_code_block
-  (info_string
-    (language) @text.literal))
+(link_reference_definition) @link_text.markup
+(link_destination) @link_uri.markup