Color keys/values in JSON differently

[KjellConnelly]

Hi! Thanks for making this plugin :) I'm using JSON frontmatter at the top of my md files within a codeblock (so I get the syntax highlighting) and was wondering if you could somehow make keys/values within the JSON structure different colors? It seems to make all strings the same color, which is fine for keys OR values, but not preferrable for both:

{
   "name":"Kjell",
   "age":35,
   "hometown":"Seattle"
}

In this example, there are only 3 colors:

• White for braces, colons, and commas
• Purple for numbers (35)
• Yellow for all strings.

The main problem I have with all strings being the same color is that in just the past 24 hours, I've accidentally highlighted and copied strings beyond one entire value for long strings (think several paragraphs of markdown which have been JSON.stringified. Then I've deleted them and my JSON was all messed up because I removed too much text because I didn't see the dividing line between one key/value pair and the next.

If you can't, or it's just too much work, I understand. Just thought I'd ask :)

[deathau]

I had a poke around at the theme being used and it looks like there is a different colour set for "property", but because there's also one for "string", and a json property is both, so the css is equally specific and it takes which was defined later (which in this case is string).

<span class="cm-string cm-property cm-hmd-codeblock">

To fix it, you can create a snippet or add the following to your theme:

.cm-s-obsidian span.cm-property.cm-string {
    color: #D4D4D4;
}

(that's the colour from the theme I'm using in dark mode, but obviously, you can change it to be whatever colour you like).

I'll leave this issue open for now while I consider whether to swap those two rules around. I hesitate to modify it because it's just copy-pasted from elsewhere, and if I do touch it, I might overwrite it in a later update (but on the other hand, what are the chances of that?).

[KjellConnelly]

@deathau Great! Thank you so much :) I added this to one of the css files and it works just as I'd hope! Thank you!