Support for comments in JSON

[mariusschulz]

What's your take on supporting single-line and block comments in JSON? Several popular projects (e.g. TypeScript) allow comments in JSON configuration files:

{
  "compilerOptions": {
    "target": "es5",      /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
    "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    // "lib": [],         /* Specify library files to be included in the compilation. */
    // "allowJs": true,   /* Allow javascript files to be compiled. */
    // "checkJs": true,   /* Report errors in .js files. */
    // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */

    // ...
}

Although the JSON spec doesn't include comments, I think it would be helpful to have support for them in Prism; comments can be particularly helpful in technical blog posts.

What do you think? I'll be happy to send a PR! :)

[mAAdhaTTah]

I don't know as we need to modify JSON; if you want comments, couldn't you use the JS language instead? I also find most of the editors I use don't highlight comments in JSON files correctly.

That said, I'm open to being convinced otherwise.

[mariusschulz]

That's exactly what I did to unblock myself for now. I highlighted my code example using the JS language, but the results aren't great since quoted properties and string literals use the same color:

If you feel uncomfortable modifying JSON directly, we could introduce a new JSON5 language that extends JSON. However, I'd prefer to add comments to JSON directly. Comments are useful in general, e.g. to indicate that some parts have been omitted:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    // ...
}

[mariusschulz]

For further consideration, here's what the above screenshot would look like if the JSON language supported comments. I think it looks much better!

We could reuse the comment patterns from the clike language:

Prism.languages.json = {
+  comment: [
+    {
+      pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,
+      lookbehind: true
+    },
+    {
+      pattern: /(^|[^\\:])\/\/.*/,
+      lookbehind: true,
+      greedy: true
+    }
+  ],
  property: /"(?:\\.|[^\\"\r\n])*"(?=\s*:)/i,
  string: {
    pattern: /"(?:\\.|[^\\"\r\n])*"(?!\s*:)/,
    greedy: true
  },
  number: /-?\d+\.?\d*([Ee][+-]?\d+)?/,
  punctuation: /[{}[\],]/,
  operator: /:/g,
  boolean: /\b(?:true|false)\b/i,
  null: /\bnull\b/i
};

[RunDevelopment]

Using the comments pattern from C-like will work but since JS (and therefore JSON) does not have all syntactical features of C, we can simplify the pattern. This should also work:

'comment': /\/\/.*|\/\*[\s\S]*?(?:\*\/|$)/

Also, property has to be greedy because it is not the first pattern anymore.

Btw. Are you interested in making this a PR?

[mariusschulz]

Sure, I'll be happy to! Just wanted to run this by everyone first. I'll send a PR tonight!

[mariusschulz]

Closing this issue, now that support has landed in #1595.