Language request: HOCON

[sivaraam]

Language HOCON ("Human-Optimized Config Object Notation") is a human-friendly JSON superset. It is a nice configuration format to use. So, it would be great to see support for it in Prism.

Additional resources

• Official website: https://lightbend.github.io/config/
• Documentation: https://github.com/lightbend/config#api-docs
• Informal spec: https://github.com/lightbend/config/blob/main/HOCON.md
• A HOCON playground: https://hocon-playground.herokuapp.com/

Do let me know if I could help with this in anyway.

[murosan]

sample grammar:

Prism.languages.hocon = {
  property: [
    /(?:[\w\-]|[^:\+.\[\]{}="$\s\r\n]+)/,
    /"(?:\\.|[^"\r\n]*)"/
  ].map(r => ({
    pattern: new RegExp(r.source + '(?=\\s*(?:[\\.:={]|\\+=))'),
    lookbehind: true,
    greedy: true,
  })),
  string: [
    { pattern: /"""[\s\S]*?"""/, greedy: true },
    {
      pattern: /(^|[^\\])"(?:\\.|[^"\\\r\n])*"/,
      lookbehind: true,
      greedy: true,
    },
  ],
  comment: { pattern: /(\/\/|#).*/, greedy: true },
  punctuation: /[\${}\[\],]/,
  operator: /[:=]/,
  keyword: {
    pattern: /(?:^|\s)include(?=\s)/,
    lookbehind: true,
    greedy: true,
  },
  function: {
    pattern: /(?:^|\s)(file|url|classpath|required)(?=\()/,
    greedy: true,
  },
}

highlighted sample: https://murosan.github.io/prism-test/hocon.html

[sivaraam]

Thank you very much @murosan ! This is certainly a good starting point. We got this working with some custom setup in Docusaurus. It would be great if this gets integrated into Prism itself :-)

[mljohns89]

@sivaraam Would you be willing to share a gist on what you had to do to get this into docusaurus please?

[murosan]

I was able to do it by following the steps described on this page: https://docusaurus.io/docs/markdown-features/code-blocks

1. prepare grammar file

// src/prism/prism-hocon.js

Prism.languages.hocon = {
  property: [/(?:[\w\-]|[^:\+.\[\]{}="$\s\r\n]+)/, /"(?:\\.|[^"\r\n]*)"/].map(
    r => ({
      pattern: new RegExp(r.source + '(?=\\s*(?:[\\.:={]|\\+=))'),
      lookbehind: true,
      greedy: true,
    }),
  ),
  string: [
    { pattern: /"""[\s\S]*?"""/, greedy: true },
    {
      pattern: /(^|[^\\])"(?:\\.|[^"\\\r\n])*"/,
      lookbehind: true,
      greedy: true,
    },
  ],
  comment: { pattern: /(\/\/|#).*/, greedy: true },
  punctuation: /[\${}\[\],]/,
  operator: /[:=]/,
  keyword: {
    pattern: /(?:^|\s)include(?=\s)/,
    lookbehind: true,
    greedy: true,
  },
  function: {
    pattern: /(?:^|\s)(file|url|classpath|required)(?=\()/,
    greedy: true,
  },
}

2. generate prism-include-languages.js

npm run swizzle @docusaurus/theme-classic prism-include-languages

3. import grammar

// src/theme/prism-include-language.js

  additionalLanguages.forEach((lang) => {
    if (lang === 'php') {
      // ...
    require(`prismjs/components/prism-${lang}`);
  });

  require('../prism/prism-hocon') // add this line

[sivaraam]

Our setup more or less matches what @murosan has detailed 🙂