[Bug] monaco.editor.colorize does not work as expected with json language

[Ruminat]

Reproducible in vscode.dev or in VS Code Desktop?

• [X] Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• [ ] Not reproducible in the monaco editor playground

Monaco Editor Playground Code

I don't know how to reproduce this issue in VS Code Desktop

How to reproduce the bug

Go to playground: https://microsoft.github.io/monaco-editor/playground.html#creating-the-editor-syntax-highlighting-for-html-elements

Replace the code in the JavaScript tab with this:

const jsonCode = `{ "some": "body once told me" }`;
const language = "json";
monaco.editor.colorize(jsonCode, language, { tabSize: 2 }).then((code) => {
    document.getElementById('code').innerHTML = code;
    console.log(code)
});

Actual Behavior

no syntax highlighting for JSON — this is the output I get (HTML): <span><span class="mtk1">{ "some": "body once told me" }</span></span><br/>

Expected Behavior

syntax highlighted JSON output

Additional Context

If you change const language = "json"; to const language = "javascript"; it works though, it gives the expected output: <span><span class="mtk1">{ </span><span class="mtk20">"some"</span><span class="mtk1">: </span><span class="mtk20">"body once told me"</span><span class="mtk1"> }</span></span><br/>

[Skkay]

I encounter the same issue with monaco.editor.colorizeElement, reproducible in the Monaco Editor playground.

How to reproduce the bug

Playground https://microsoft.github.io/monaco-editor/playground.html#creating-the-editor-syntax-highlighting-for-html-elements

Leave Javascript as default:

monaco.editor.colorizeElement(document.getElementById('code'));

Set HTML as:

<pre id="code" data-lang="json" style="width: 500px">
{
    "boolean": true,
    "string": "test",
    "int": 10
}
</pre>

Actual Behavior

Resulted HTML (formatted):

<pre id="code" data-lang="json" style="width: 500px;" class="vs">
    <span>
        <span class="mtk1">{</span>
    </span>
    <br />
    <span>
        <span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;"boolean":&nbsp;true,</span>
    </span>
    <br />
    <span>
        <span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;"string":&nbsp;"test",</span>
    </span>
    <br />
    <span>
        <span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;"int":&nbsp;10</span>
    </span>
    <br />
    <span>
        <span class="mtk1">}</span>
    </span>
    <br />
    <span>
        <span></span>
    </span>
    <br />
</pre>

.mtk1 class has only color: #000000;

Screenshot:

Expected Behavior

Syntax highlighted JSON output

[Code42Cate]

I'm having the same issue, for some reason a delay after onMount fixes this issue for me. Not sure why:D

[hediet]

I can verify, but I have no idea what causes this.

[yairsimantov20]

Did anyone find a solution or a workaround for this issue?

[3da]

I have the same problem... It would be nice to fix it.

[AGao00]

I'm also running into the same issue. Are there any updates on this, @alexdima?