Add support Jinja syntax (have some work code inside)

[MatsiukMykola]

Context

• This issue is not a bug report. (please use a different template for reporting a bug)
• This issue is not a duplicate of an existing issue. (please use the search to find existing issues)

Description

Hello.
I use Monaco Editor 0.30.1 inside the AMIS framework (guys, do not upgrade the version because it supports IE 11). I am a BE developer but tried to add support for syntax highlighting and had some success:

require(['vs/editor/editor.main'], function () {
    monaco.languages.register({
        id: 'jinja',
        extensions: ['.jinja', '.jinja2'],
        aliases: ['Jinja', 'jinja', 'jinja2'],
        mimetypes: ['text/jinja', 'text/jinja2']
    });

    monaco.languages.setMonarchTokensProvider('jinja', {
        wordPattern: /(-?\d*\.\d\w*)|([^`~!@$^&*()=+[{]}\\|;:'",.<>\/\s]+)/g,
        comments: {
            blockComment: ["{#", "#}"],
        },
        brackets: [
            ["{#", "#}"],
            ["{%", "%}"],
            ["{{", "}}"],
            ["(", ")"],
            ["[", "]"],
            // HTML
            ["<!--", "-->"],
            ["<", ">"],
        ],
        autoClosingPairs: [
            {open: "{# ", close: " #}"},
            {open: "{% ", close: " %}"},
            {open: "{{ ", close: " }}"},
            {open: "[", close: "]"},
            {open: "(", close: ")"},
            {open: '"', close: '"'},
            {open: "'", close: "'"},
        ],
        surroundingPairs: [
            {open: '"', close: '"'},
            {open: "'", close: "'"},
            // HTML
            {open: "<", close: ">"},
        ],
        ////////////////////
        defaultToken: "",
        tokenPostfix: "",
        ignoreCase: true,
        brackets: [
            {token: "delimiter.twig", open: "{%", close: "%}"},
            {token: "delimiter.twig", open: "{{", close: "}}"},
            {token: "delimiter.twig", open: "{#", close: "#}"},
            {token: "delimiter.square.twig", open: "[", close: "]"},
            {token: "delimiter.paren.twig", open: "(", close: ")"},
        ],
        keywords: [
            "if",
            "else",
            "elif",
            "endif",
            "for",
            "endfor",
            "while",
            "endwhile",
            "do",
            "loop",
            "break",
            "continue",
            "as",
            "with",
            "without",
            "context",
            "include",
            "import",
            "from",
            "as",
            "true",
            "false",
            "none",
        ],
        tokenizer: {
            root: [
                [/\s+/],
                [/{#/, "comment.twig", "@commentState"],
                [/{%[-~]?/, "delimiter.twig", "@blockState"],
                [/{{[-~]?/, "delimiter.twig", "@variableState"],
                [/[^{]+/, ""],
            ],
            commentState: [
                [/#}/, "comment.twig", "@pop"],
                [/./, "comment.twig"],
            ],
            blockState: [
                [/-?%}/, "delimiter.twig", "@pop"],
                [/\b(if|else|elif|endif|for|endfor|while|endwhile|do|loop|break|continue|as|with|without|context|include|import|from|true|false|none)\b/, "keyword.twig"],
                {include: "expression"},
            ],
            variableState: [
                [/-?}}/, "delimiter.twig", "@pop"],
                {include: "expression"},
            ],
            expression: [
                [/\s+/],
                [/\(|\)|\[|\]|\{|\}/, "delimiter.twig"],
                [/\d+(\.\d+)?/, "number.twig"],
                [/"([^#"\\]*(?:\\.[^#"\\]*)*)"/, "string.twig"],
                [/'([^'\\]*(?:\\.[^'\\]*)*)'/, "string.twig"],
                [/\b(and|or|not|b-and|b-xor|b-or)\b/, "operators.twig"],
                [/\b(starts with|ends with|matches)\b/, "operators.twig"],
                [/\b(in|is)\b/, "operators.twig"],
                [/\+|-|\*{1,2}|\/{1,2}|%|==|!=|<|>|>=|<=|\||~|:|\.{1,2}|\?{1,2}|=/, "operators.twig"],
                [/[^\W\d][\w]*/, {
                    cases: {
                        "@keywords": "keyword.twig",
                        "@default": "variable.twig",
                    },
                }],
            ],
        },


    });

});

useful links (just do notice any helpful link):

    # TODO: add monaco editor support syntax highlight
    # https://github.com/zebbra/monaco-jinja2-example/tree/master/src
    # https://microsoft.github.io/monaco-editor/monarch.html
    # https://github.com/codemirror/legacy-modes#user-content-jinja2
    # https://marketplace.visualstudio.com/items?itemName=samuelcolvin.jinjahtml
    # https://code-room.io/libs/monaco-editor/dev/vs/basic-languages/twig/
    # https://github.com/microsoft/monaco-languages/blob/monaco-merge/monaco-languages/src/twig/twig.ts
    # https://github.com/samuelcolvin/jinjahtml-vscode/blob/main/syntaxes/jinja.tmLanguage.json
    # https://github.com/wholroyd/vscode-jinja/blob/master/syntaxes/jinja.json

    # TODO: UI language wait fix: https://github.com/amisadmin/fastapi-amis-admin/issues/145
    # https://www.npmjs.com/package/@monaco-editor/loader#config
    # https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html

    # fix:
    # https://github.com/amisadmin/fastapi-amis-admin/issues/145
    # https://github.com/baidu/amis/issues/8880

can anybody please help improve support Jinja, fux bugs, extend functionality (this is my first exp/ with Monaco-Editor)

Monaco Editor Playground Link

No response

Monaco Editor Playground Code

No response

[MatsiukMykola]

[lukeod]

I've submitted a PR: #4870

Feel free to review & suggest changes