pulsar-edit / pulsar

A Community-led Hyper-Hackable Text Editor
https://pulsar-edit.dev
Other
3.21k stars 137 forks source link

[syntax themes] Enhanced highlighting of JSON keys #597

Open savetheclocktower opened 1 year ago

savetheclocktower commented 1 year ago

Have you checked for existing feature requests?

Summary

VSCode distinguishes the highlighting of JSON string keys from JSON string values.

Screenshot 2023-06-17 at 10 17 57 AM

The built-in themes in Pulsar don't seem to do this.

Screenshot 2023-06-17 at 10 18 25 AM

When this came up in Discord, there seemed to be some support for the idea of changing the built-in syntax themes to support this. The TM-style JSON grammar can already distinguish JSON keys by targeting the meta.structure.key.json selector (though you'd need to style the string.quoted.double.json selector inside of it). The modern-tree-sitter JSON grammar doesn't yet use the meta.structure.key.json scope name, but that enhancement is present in #555.

What benefits does this feature provide?

At-a-glance distinguishing of keys from values can be useful for things like JSON config files.

Any alternatives?

Can't think of any alternatives. The crucial thing here is how to distinguish the key from the value — which color to use, and whether to use the same color for the quotation marks or to recolor only the content inside the string. I don't use a built-in syntax theme, so I'm happy to leave those decisions to someone who does.

Other examples:

No response

confused-Techie commented 1 year ago

Personally on this topic, I'd vote that the colour of the quotation marks and content of a key is the same colour, and of course different from the actual value.

As for what colour that's hard to say, but I'd think either we want to have it try and mimic the colouring we use for other syntax themes, such as the variable assigning colour, or we instead focus on making it look nice within the existing JSON file. In which case an off green would likely look the nicest, like VSCode does

Daeraxa commented 1 year ago

Comparison of other editors for inspiration:

Editor Theme Key Value
Pulsar One Dark #98c379 #98c379
Pulsar One Light #50a14f #50a14f
Pulsar Atom Dark #A8FF60 #A8FF60
Pulsar Atom Light #DD1144 #DD1144
VSCode Atom One Dark Theme #e06c75 #98c379
VSCode Atom One Light Theme #e45649 #50a14f
Helix onedark #e06c75 #98c379
Helix onelight #c742be #24a443

Basically for One Dark most editors use https://github.com/one-dark as a reference. One Light seems to be more variable (i.e. less popular).

image

And the VSCode One Light colours which match pretty well to the dark ones: image