monaco-editor: Semantic highlighting does not appear to work (due to theming)

  1. I expect the first four characters to be highlighted but nothing happens.
  2. There is no documentation really for any of the functions but releaseDocumentSemanticTokens in particular is not clear to me what I should be doing there.
monaco.languages.register({
    id: 'new'
});
monaco.languages.registerDocumentSemanticTokensProvider('new', {
    getLegend: () => {
        return {
            tokenModifiers: [],
            tokenTypes: [
                "keyword"
            ]
        }
    },

    provideDocumentSemanticTokens: () => {
        return {
            data: [
                0, 0, 4, 0, 0
            ]
        }
    },

    releaseDocumentSemanticTokens: () => {
    }
});

monaco.editor.create(document.getElementById("container"), {
    value: "12345678",
    language: "new"
});

About this issue

  • Original URL
  • State: open
  • Created 4 years ago
  • Reactions: 5
  • Comments: 15 (13 by maintainers)

Commits related to this issue

Most upvoted comments

I see. Thanks for the update @alexdima!

Is there some way to (easily) make the respective registerDocumentSemanticTokensProvider calls for Monaco to treat things the same way as in VSC?

So this issue is not 100% done.

Are there some plans to address this?

@rcjsuen This is indeed a mess, and sorry about that. Semantic highlighting has shipped turned off by default. Due to it being a global setting (not an editor instance setting), it was also overlooked in monaco.d.ts typings, where it would need to be added manually…

The way to enable it is to use: 'semanticHighlighting.enabled': true as an option, i.e.

const editor = monaco.editor.create(document.getElementById("container"), {
    value: "12345678",
    language: "new",
    'semanticHighlighting.enabled': true
});

The weird dot keyname must be used due to some more trouble with object-like global settings which are not picked up, so using semanticHighlighting: { enabled: true} does not work …

A full working sample:

monaco.languages.register({
    id: 'new'
});
monaco.languages.registerDocumentSemanticTokensProvider('new', {
    getLegend: () => {
        return {
            tokenModifiers: [],
            tokenTypes: [
                "keyword"
            ]
        }
    },

    provideDocumentSemanticTokens: () => {
        return {
            data: [
                0, 0, 4, 0, 0
            ]
        }
    },

    releaseDocumentSemanticTokens: () => {
    }
});

const editor = monaco.editor.create(document.getElementById("container"), {
    value: "12345678",
    language: "new",
    'semanticHighlighting.enabled': true
});
const t = editor._themeService._theme;
t.getTokenStyleMetadata = (type, modifiers) => {
    if (type === 'keyword') {
        return {
            foreground: 5, // color id 5
            bold: true,
            underline: true,
            italic: true
        };
    }
};

image

@aeschli @alexdima Now that microsoft/vscode#86415 has been finalized, can this be prioritized for April?