New: Better Syntax Highlighting, Including shellHook Code, With VS Code Extension

Announcements
1

What is this?

Its a VS Code extension (Better Nix Syntax) that makes shellHook have shell highlighting, as well as improved Nix highlighting in general!

Let Me Show You!

Bearded Theme (Stained Blue)

Before                                                                         After

before_after_pt1before_after 2

Atom One Dark

Before After
code_atom_theirs code_atom_mine

Bearded Theme (Stained Blue)

Before After
code_beard_theirs code_beard_mine

Cobalt Next

Before After
code_cobalt_theirs code_cobalt_mine

I started this project 3 years ago, I just finally got around to finishing it! I maintain the Shell syntax and C++ syntax for VS Code (I also have a Better Docker Syntax, Better Perl Syntax, Better Prolog Syntax, etc)

NOTE: most themes (including the terrible default VS Code theme) don’t take advantage of the better token-tags provided by this extension. I can’t make your theme do anything, I only give it the opportunity to do better.

9 Likes
2

oooh thank you! i wonder if a port to zed would be too hard; i can take a look at that soon

3

Zed uses tree-sitter which is the SOTA tool for parsing programming languages. VSCode is working on tree-sitter support too, it’s the “real solution”.

Try pasting this into zed

{
  hello-script = # bash
    ''
      #!${pkgs.bash}/bin/bash
      set -euo pipefail
      
      echo "Hello, world!"
      echo "Current directory: $(pwd)"
    '';
}

(AI slop example, but try removing # bash and it should change colors in Zed)

Good work to author though, I’ll use this while waiting for tree-sitter :smile:

1 Like
4

oh sweet! i didn’t realize zed did it that way; moved all my scripts to their own files and started home.fileing because the syntax was annoying me when I used vscode and never thought to check again when i switched.

5

Nailed it :ok_hand:, thanks for answering that for me. The tree sitter is so good it’s practically cheating haha. Ive been trying to get VS code to switch for half a decade. That said, I’m not sure how editors like Zed handle nested languages. I didnt know about that # bash trick in Zed, thats fantastic

And on that note, I should mention it is provably impossible to parse nix correctly with the TextMate parser. I have to use a ton of cheats to make it look correct, and there are going to be bugs I just can’t fix. For example, the textmate parser can’t “go back” to a previous line. So if I see a {\n I don’t know if its an attr-set or the start of a function.

1 Like
6

My understanding is that TextMate is inadequate for most parsing. The # bash trick is called “language injection” and is defined here: tree-sitter-nix/queries/injections.scm at ea1d87f7996be1329ef6555dcacfa63a69bd55c6 · nix-community/tree-sitter-nix · GitHub but I don’t speak tree-sitter, i just know it works in Nix :smile:

There’s also tree-sitter-vscode - Visual Studio Marketplace but it requires you to build tree-sitter parsers as wasm which I couldn’t figure out in nixpkgs when I looked at it.

Edit: I think Zed is developed by the people who wrote tree-sitter, which are the same people who worked on the Github Atom editor :smile:

2 Likes