Monokai themes don't highlight JSON right

[thewarpaint]

The Monokai themes do not highlight the JSON format right. The second-level braces and quotes for keys do not appear white as they should. I attach two screenshots taken from the official demo:

[isagalaev]

Thanks for reporting it. It is, in fact, a known glitch and we left it as is for now until the upcoming overhaul of class names and styles in #348.

[thewarpaint]

Perfect. Looking forward to the overhaul then!

[danelkhen]

I also found some other highlighting issues when using json within a function call - this happens with any style, not just Monokai

Works correctly

    var x = {
        title: "Line - 2 Columns (x and y)",
        data: [ {
            columns: ["x", "y"],
            rows: [
                [10, 20],
                [20, 50],
                [30, 10],
                [40, 90],
                [50, 120],
            ],
        }],
    };

Works incorrectly:

    myFunc({
        title: "Line - 2 Columns (x and y)",
        data: [ {
            columns: ["x", "y"],
            rows: [
                [10, 20],
                [20, 50],
                [30, 10],
                [40, 90],
                [50, 120],
            ],
        }],
    });

[sourrust]

@danelkhen This isn't a bug considering JSON doesn't have functions. Use javascript when you are using features outside of the JSON definition.

Also the first example looks like it was highlighted in javascript since var has a color and JSON keys need to be in " so that makes it invalid JSON just like having functions and variable definition.

[danelkhen]

@sourrust
I don't really understand how can you not consider this a bug. This is clearly a valid syntax in javascript, to use json notation (not formal JSON for transport) to create a new object and pass it in a function. This happens all the time when using basic libraries like jQuery. Every editor in the world would highlight this correctly.

[sourrust]

JSON is not JavaScript. Look at the example you provided, it is a JavaScript object not JSON.

JSON looks like this:

{
  "title": "Line - 2 Columns (x and y)",
  "data": [ {
    "columns": ["x", "y"],
    "rows": [
      [10, 20],
      [20, 50],
      [30, 10],
      [40, 90],
      [50, 120],
    ],
  }],
}

Note the double quotes and no variable declaration or function calls. If you use the examples you provided in JSON you will have an error even with Github's highlighter. See for yourself:

var x = {
  title: "Line - 2 Columns (x and y)",
  data: [ {
    columns: ["x", "y"],
    rows: [
      [10, 20],
      [20, 50],
      [30, 10],
      [40, 90],
      [50, 120],
    ],
  }],
};

Use JavaScript for those cases.

[danelkhen]

I think that the term JSON in my title has thrown you off. Cuz I'm not sure what you mean by "use javascript". I am using highlight.js in javascript mode, and it colors it wrong. That's all I'm trying to say. Let me ask it another way - is there a way in highlight.js to make my valid code be to be highlighted correctly?

[sourrust]

Right, I was stuck in the that mindset because this issue is about JSON.

So I'm guessing you are using autodetection and the language highlight.js is choosing is JSON? The way you specify a language is:

<pre><code class="javascript">...</code></pre>

That autodetection error might have been fixed in a later versions than what you are using because 8.4 and the master branch doesn't detect the snippet as JSON.

If this isn't your problem, can you make a separate issue? With this new information, your possible bug has nothing to do with the original issue.

[danelkhen]

I think I tried it, but I'll double check and get back to you. Thanks!

[danelkhen]

You're right, it has detected it as css instead of js. Seems to render fine when explicitly setting class='javascript'
Thanks!