JSON highlighters for keys

Help
1

Hi

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

image
image308×547 19.5 KB

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

image
image308×547 24 KB

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
2

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
3

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:

image
image666×829 58 KB

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

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

image
image669×833 58 KB

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?

1 Like
4

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
5

Sure no problem! I let you create the PR.

6

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

1 Like
7

Would also like a different colour for JSON keys! It looks like the recursive nature of JSON did in the PR. It looks to me that json.kak has not changed. Has there been any progress on this that I missed?

Meanwhile jq does a fine job highlighting JSON, nesting and all, in the terminal. However, the colours don’t survive piping jq into kak (unless jq is detecting which is at the other end of the pipe and going monochrome). Is there a way to make kakoune render terminal control characters (related to colour)?

This is not perfect either because it won’t correctly highlight any edits, but I find that I have to run JSON edits in kakoune through jq in any case to check for syntax errors, so perhaps it’s not that much of a drawback.