JSON highlighters for keys


Currently when I edit a JSON file, it looks like this. Almost everything is in yellow (which is my default color for strings):

I would love to have a different color for JSON keys (here in pink but it doesn’t matter):

This way, I reckon it is way easier to spot string as values vs keys!

Here are the regions highlighters currently defined in json.kak:

add-highlighter shared/json regions
add-highlighter shared/json/code default-region group
add-highlighter shared/json/string region '"' (?<!\\)(\\\\)*" fill string

add-highlighter shared/json/code/ regex \b(true|false|null|\d+(?:\.\d+)?(?:[eE][+-]?\d*)?)\b 0:value

I must admit that I’m very lame at writing regions delimiter and I failed to achieve what I depicted on the 2nd screenshot.

Does someone have the magic incantation for this?

1 Like

I gave it a shot. To me it seems it would be pretty difficult to handle JSON highlighting using regions in case such as this, so I ditched them and took regex only route:

add-highlighter shared/json group
add-highlighter shared/json/string regex (?<!\\)("(?:[^"]|\\")*(?<!\\)") 1:string
add-highlighter shared/json/key regex (?<!\\)("(?:[^"]|\\")*(?<!\\)")\s*: 1:green
add-highlighter shared/json/literal regex \b(true|false|null|\d+(?:\.\d+)?(?:[eE][+-]?\d*)?)\b 0:value

Wasn’t sure which face would be semantically best here, so left it at green.

1 Like

Thanks a lot @cipharius ! Really appreciate your help.

I was about to try the regex road as well.

Here’s what it looks with your snippet:

Literals like numbers, true and false are hightlighted inside strings.

By moving the last hightlighter on first position, here’s the result:

I decided to use the keyword face for JSON keys, since it’s the one used by CSS properties, which are “quite” similar.

Finally, I put everything in a ModuleLoaded hook to overwrite the default highlighter provided by Kakoune:

hook global ModuleLoaded json %{
  remove-highlighter shared/json
  add-highlighter shared/json group
  add-highlighter shared/json/literal regex \b(true|false|null|\d+(?:\.\d+)?(?:[eE][+-]?\d*)?)\b 0:value
  add-highlighter shared/json/string regex (?<!\\)("(?:[^"]|\\")*(?<!\\)") 1:string
  add-highlighter shared/json/key regex (?<!\\)("(?:[^"]|\\")*(?<!\\)")\s*: 1:keyword

Do you think we should make a PR to change the current json.kak?

I thought about creating PR as well. Even if it doesn’t get accepted as is, I think it would still act as a useful thread for discussion.

If you don’t mind, I want to create the PR as I’m attending the Hacktoberfest event and I need few more PRs.

1 Like

Sure no problem! I let you create the PR.

Alright, I have started the PR here: https://github.com/mawww/kakoune/pull/3142

1 Like