microsoft / microsoft/monaco-editor

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

Open
#3,105 8 comments 12 reactions 1 assignee View on GitHub

@alexdima is already working on this.

Since Jul 19, 2022.

bug grammars json
Dominant language
JavaScript
Stars
46.8k
Forks
4.1k
Avg merge
17h 58m
Merged PRs (30d)
1

Description

Reproducible in vscode.dev or in VS Code Desktop?
  • Not reproducible in vscode.dev or VS Code Desktop
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/>

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.