enabling json syntax highligting embedded in html file

[kadiryazgan]

Hello,

I'm trying to create a Monarch configuration file to enable json highligting embedded in an html file. Similar to how <style> and <script> tags are handled. Content inside <data> should be highlighted as JSON. (I picked <data> for simplification, I wil replace it <script type="application/json"> when this works)

I tried to imitate how <script> and <style> tags are configured. Tried various values for nextEmbedded. So far I couldn't make much progress. I'm wondering if I'm on the right track.

Here's my config.

{
  defaultToken: '',
  tokenPostfix: '.html',
  ignoreCase: true,

  // The main tokenizer for our languages
  tokenizer: {
    root: [
      [/<!DOCTYPE/, 'metatag', '@doctype'],
      [/<!--/, 'comment', '@comment'],
      [/(<)(\w+)(\/>)/, ['delimiter.html', 'tag.html', 'delimiter.html']],
      [/(<)(script)/, ['delimiter', { token: 'tag', next: '@script' }]],
      [/(<)(style)/, ['delimiter', { token: 'tag', next: '@style' }]],
      [/(<)(data)/, ['delimiter', { token: 'tag', next: '@data' }]], // <-- this should handle <data> tags
      [/(<)((?:[\w-]+:)?[\w-]+)/, ['delimiter', { token: 'tag', next: '@otherTag' }]],
      [/(<\/)((?:[\w-]+:)?[\w-]+)/, ['delimiter', { token: 'tag', next: '@otherTag' }]]
    ],

    doctype: [
      [/>/, 'metatag', '@pop'],
      [/[^>]+/, 'metatag.content']
    ],

    comment: [
      [/-->/, 'comment', '@pop'],
      [/[^-]+/, 'comment.content'],
      [/./, 'comment.content']
    ],

    otherTag: [
      [/\/?>/, 'delimiter', '@pop'],
      [/"([^"]*)"/, 'attribute.value'],
      [/'([^']*)'/, 'attribute.value'],
      [/[\w-]+/, 'attribute.name'],
      [/=/, 'delimiter'],
      [/[ \t\r\n]+/, ''] // whitespace
    ],

    script: [
      [/"([^"]*)"/, 'attribute.value'],
      [/'([^']*)'/, 'attribute.value'],
      [/[\w-]+/, 'attribute.name'],
      [/=/, 'delimiter'],
      [
        />/,
        {
          token: 'delimiter',
          next: '@scriptEmbedded',
          nextEmbedded: 'text/javascript'
        }
      ],
      [/[ \t\r\n]+/, ''], // whitespace
      [/(<\/)(script\s*)(>)/, ['delimiter', 'tag', { token: 'delimiter', next: '@pop' }]]
    ],

    scriptEmbedded: [
      [/<\/script/, { token: '@rematch', next: '@pop', nextEmbedded: '@pop' }],
      [/[^<]+/, '']
    ],

    style: [
      [/"([^"]*)"/, 'attribute.value'],
      [/'([^']*)'/, 'attribute.value'],
      [/[\w-]+/, 'attribute.name'],
      [/=/, 'delimiter'],
      [
        />/,
        {
          token: 'delimiter',
          next: '@styleEmbedded',
          nextEmbedded: 'text/css'
        }
      ],
      [/[ \t\r\n]+/, ''], // whitespace
      [/(<\/)(style\s*)(>)/, ['delimiter', 'tag', { token: 'delimiter', next: '@pop' }]]
    ],

    styleEmbedded: [
      [/<\/style/, { token: '@rematch', next: '@pop', nextEmbedded: '@pop' }],
      [/[^<]+/, '']
    ],

    data: [
      [/"([^"]*)"/, 'attribute.value'],
      [/'([^']*)'/, 'attribute.value'],
      [/[\w-]+/, 'attribute.name'],
      [/=/, 'delimiter'],
      [
        />/,
        {
          token: 'delimiter',
          next: '@dataEmbedded',
          nextEmbedded: 'text/json'
        }
      ],
      [/[ \t\r\n]+/, ''], // whitespace
      [/(<\/)(data\s*)(>)/, ['delimiter', 'tag', { token: 'delimiter', next: '@pop' }]]
    ],

    dataEmbedded: [
      [/<\/data/, { token: '@rematch', next: '@pop', nextEmbedded: '@pop' }],
      [/[^<]+/, '']
    ]
  }
};