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

Ruminat commented 2 years ago

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): { "some": "body once told me" } 

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: { "some": "body once told me" } 

Skkay commented 2 years ago

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: