Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve Regex syntax highlighting #25332

Merged
merged 4 commits into from
Mar 22, 2025
Merged

Conversation

chbk
Copy link
Contributor

@chbk chbk commented Feb 21, 2025

Release Notes:

  • Improved Regex syntax highlighting
Zed 0.174.6 With this PR
Image Image
  • (?P=, <: punctuation.bracket
  • group_name: property -> label
  • ^, $: string.escape -> operator
  • \b, \B, \k: string.escape -> keyword.operator
  • added regex scope to target regex tokens specifically
regex = /^(?<group>[!\.\?])\b[a-z]+word\k<group>$/g

@cla-bot cla-bot bot added the cla-signed The user has signed the Contributor License Agreement label Feb 21, 2025
@chbk chbk marked this pull request as ready for review February 21, 2025 13:32
@maxdeviant maxdeviant self-assigned this Feb 21, 2025
maxdeviant added a commit that referenced this pull request Feb 21, 2025
Release Notes:

  - Improved JavaScript and TypeScript syntax highlighting.

| Zed 0.174.6 | With this PR |
| --- | --- |
|
![Image](https://github.com/user-attachments/assets/a64f0abf-3b4e-4369-80c5-1d1381c925fc)
|
![Image](https://github.com/user-attachments/assets/f8224243-f4ab-4af9-8dd8-5062dd7ea743)
|

- `regex_flags`: `keyword.regex`, see the [Regex
PR](#25332) for other Regex
scopes
- `@`: `punctuation.special`, as in Python
- `jsx_text`: `text.jsx`
- `=`: `operator` -> `punctuation.jsx.delimiter`, `punctuation` as in
[VS
Code](https://github.com/microsoft/vscode/blob/0fe195613ed9901f669cd0f799fe807f0189d029/extensions/html/syntaxes/html.tmLanguage.json#L78)
and
[Atom](https://github.com/atom/language-html/blob/ee750a014a003c3d6f10b91e3cd5f9bfa0f051e6/grammars/tree-sitter-html.cson#L47)
- added `jsx` scope to target JSX tokens specifically

```javascript
/**
 * @Keyword comment
 */
@log
class X {
  render() {
    return (
      <div jsx_attribute="value">
        <Input onKeyPress={super.bind(this)}/>
        jsx_text
      </div>
    );
  }
}
const IDENTIFIER = true
```

---------

Co-authored-by: Marshall Bowers <git@maxdeviant.com>
@marcospb19 marcospb19 self-assigned this Mar 21, 2025
@marcospb19
Copy link
Contributor

marcospb19 commented Mar 21, 2025

After @ConradIrwin's 6faa7cd, now we don't see the text as green:

image

I'm finding a little weird having the enclosing // be the same color as ^ and $. But it makes sense if both are operators.

@ConradIrwin @chbk @maxdeviant thoughts?

@ConradIrwin
Copy link
Member

no strong opinion; feel free to change it.

One thing to note is that we use the regex highlighting in the search box, so needs to work in both contexts.

@marcospb19
Copy link
Contributor

Alright! I think the current version is looking decent in both search box and normal editor.

@marcospb19 marcospb19 merged commit f4d1e79 into zed-industries:main Mar 22, 2025
15 checks passed
@chbk chbk deleted the syntax-regex branch March 29, 2025 20:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
cla-signed The user has signed the Contributor License Agreement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants