Configuraciones de Monaco Editor

MonacoEditor.html

<div class="eArriba25 eAbajo200 col-md-12">
    <form method="post">
        <div class="text-center alto30">
            <button class="btn btn-primary " formaction="/editor">Compilar</button>
            <button class="btn btn-primary text-light" formaction="/editor">Debuguear</button>
            <button class="btn btn-primary text-light" formaction="/editor">Continuar</button>
            <button class="btn btn-primary text-light" formaction="/editor">Siguiente</button>
            <button class="btn btn-primary text-light" formaction="/editor">Saltar</button>
            <button class="btn btn-primary text-light" formaction="/editor">Automatico</button>
            <button class="btn btn-primary text-light" formaction="/editor">Exportar</button>
        </div>
        <br>
        <div class="row" style="padding: 1em">
            <div id="entrada" class="col-sm-9">
                <label>Entrada</label>
                <br>
                <!--<textarea rows="10" id="taEntrada" name="taEntrada" style="width: 100%">{{entrada}}</textarea>-->
                <div id="editor1" name="editor1" style="width: 100%; height: 280px; border: 1px solid black;"></div>
            </div>
            <div id="codigoIntermedio" class="col-sm-3">
                <label>Código Intermedio</label>
                <br>
                <div id="editor2" style="width: 100%; height: 280px; border: 1px solid black;"></div>
            </div>
        </div>
        <div class="row" style="padding: 1em">
            <div id="resultados" class="col-sm-12">
                <label>Resultados</label>
                <br>
                <textarea rows="10" id="taConsola" name="taConsola" style="width: 100%">{{resultado}}</textarea>
            </div>
        </div>
        

    </form>
</div>

<script src="/javascripts/monaco-editor/min/vs/loader.js"></script>
<script>
    require.config({ paths: { 'vs': '/javascripts/monaco-editor/min/vs' } });
    require(['vs/editor/editor.main'], function () {
        // Register a new language
        monaco.languages.register({ id: 'gcc-compiler' });
        // Register a tokens provider for the language
        monaco.languages.setMonarchTokensProvider('gcc-compiler', {
            ignoreCase: true,
            keywords: [
                //tipos
                'entero', 'decimal', 'caracter', 'booleano',
                //vectores
                'tamanio',
                //cadenas
                'concatenar',
                //casteos
                'convertiracadena',
                'boolean', 'break', 'byte', 'case', 'catch', 'char', 'class', 'const', 'continue', 'debugger',
                'default', 'delete', 'do', 'double', 'else', 'enum', 'export', 'extends', 'false', 'final',
                'finally', 'float', 'for', 'function', 'goto', 'if', 'implements', 'import', 'in',
                'instanceof', 'int', 'interface', 'long', 'native', 'new', 'null', 'package', 'private',
                'protected', 'public', 'return', 'short', 'static', 'super', 'switch', 'synchronized', 'this',
                'throw', 'throws', 'transient', 'true', 'try', 'typeof', 'var', 'void', 'volatile', 'while',
                'with'
            ],
            builtins: [
                'define', 'require', 'window', 'document', 'undefined'
            ],
            operators: [
                '=', '>', '<', '!', '~', '?', ':',
                '==', '<=', '>=', '!=', '??','&&', '||', '++', '--',
                '+', '-', '*', '/', '&', '|', '^', '%', '<<',
                '>>', '>>>', '+=', '-=', '*=', '/=', '&=', '|=',
                '^=', '%=', '<<=', '>>=', '>>>='
            ],
            // define our own brackets as '<' and '>' do not match in javascript
            brackets: [
                ['(', ')', 'bracket.parenthesis'],
                ['{', '}', 'bracket.curly'],
                ['[', ']', 'bracket.square']
            ],
            // common regular expressions
            symbols: /[~!@#%\^&*-+=|\\:`<>.?\/]+/,
            escapes: /\\(?:[btnfr\\"']|[0-7][0-7]?|[0-3][0-7]{2})/,
            exponent: /[eE][\-+]?[0-9]+/,
            regexpctl: /[(){}\[\]\$\^|\-*+?\.]/,
            regexpesc: /\\(?:[bBdDfnrstvwWn0\\\/]|@regexpctl|c[A-Z]|x[0-9a-fA-F]{2}|u[0-9a-fA-F]{4})/,
            tokenizer: {
                root: [
                    // identifiers and keywords
                    [/([a-zA-Z_\$][\w\$]*)(\s*)(:?)/, {
                        cases: {
                            '$1@keywords': ['keyword', 'white', 'delimiter'],
                            '$3': ['key.identifier', 'white', 'delimiter'],   // followed by :
                            '$1@builtins': ['predefined.identifier', 'white', 'delimiter'],
                            '@default': ['identifier', 'white', 'delimiter']
                        }
                    }],
                    // whitespace
                    { include: '@whitespace' },
                    // regular expression: ensure it is terminated before beginning (otherwise it is an opeator)
                    [/\/(?=([^\\\/]|\\.)+\/)/, { token: 'regexp.slash', bracket: '@open', next: '@regexp' }],
                    // delimiters and operators
                    [/[{}()\[\]]/, '@brackets'],
                    [/[;,.]/, 'delimiter'],
                    [/@symbols/, {
                        cases: {
                            '@operators': 'operator',
                            '@default': ''
                        }
                    }],
                    // numbers
                    [/\d+\.\d*(@exponent)?/, 'number.float'],
                    [/\.\d+(@exponent)?/, 'number.float'],
                    [/\d+@exponent/, 'number.float'],
                    [/0[xX][\da-fA-F]+/, 'number.hex'],
                    [/0[0-7]+/, 'number.octal'],
                    [/\d+/, 'number'],
                    // strings: recover on non-terminated strings
                    [/"([^"\\]|\\.)*$/, 'string.invalid'],  // non-teminated string
                    [/'([^'\\]|\\.)*$/, 'string.invalid'],  // non-teminated string
                    [/"/, 'string', '@string."'],
                    [/'/, 'string', '@string.\''],
                ],
                whitespace: [
                    [/[ \t\r\n]+/, 'white'],
                    [/\/\*/, 'comment', '@comment'],
                    [/\/\/.*$/, 'comment'],
                ],
                comment: [
                    [/[^\/*]+/, 'comment'],
                    // [/\/\*/, 'comment', '@push' ],    // nested comment not allowed :-(
                    [/\/\*/, 'comment.invalid'],
                    ["\\*/", 'comment', '@pop'],
                    [/[\/*]/, 'comment']
                ],
                string: [
                    [/[^\\"']+/, 'string'],
                    [/@escapes/, 'string.escape'],
                    [/\\./, 'string.escape.invalid'],
                    [/["']/, {
                        cases: {
                            '$#==$S2': { token: 'string', next: '@pop' },
                            '@default': 'string'
                        }
                    }]
                ],
                // We match regular expression quite precisely
                regexp: [
                    [/(\{)(\d+(?:,\d*)?)(\})/, ['@brackets.regexp.escape.control', 'regexp.escape.control', '@brackets.regexp.escape.control']],
                    [/(\[)(\^?)(?=(?:[^\]\\\/]|\\.)+)/, ['@brackets.regexp.escape.control', { token: 'regexp.escape.control', next: '@regexrange' }]],
                    [/(\()(\?:|\?=|\?!)/, ['@brackets.regexp.escape.control', 'regexp.escape.control']],
                    [/[()]/, '@brackets.regexp.escape.control'],
                    [/@regexpctl/, 'regexp.escape.control'],
                    [/[^\\\/]/, 'regexp'],
                    [/@regexpesc/, 'regexp.escape'],
                    [/\\\./, 'regexp.invalid'],
                    ['/', { token: 'regexp.slash', bracket: '@close' }, '@pop'],
                ],
                regexrange: [
                    [/-/, 'regexp.escape.control'],
                    [/\^/, 'regexp.invalid'],
                    [/@regexpesc/, 'regexp.escape'],
                    [/[^\]]/, 'regexp'],
                    [/\]/, '@brackets.regexp.escape.control', '@pop'],
                ]
            }
        });
        // Define a new theme that constains only rules that match this language
        monaco.editor.defineTheme('myCoolTheme', {
            base: 'vs',
            inherit: false,
            rules: [
                { token: 'string', foreground: 'FF9900' },
                { token: 'number', foreground: '6600CC' },
                { token: 'comment', foreground: '808080' },
                { token: 'keyword', foreground: '0000FF' },
            ]
        });
        // Register a completion item provider for the new language
        monaco.languages.registerCompletionItemProvider('gcc-compiler', {
            provideCompletionItems: () => {
                return [
                    {
                        label: 'simpleText',
                        kind: monaco.languages.CompletionItemKind.Text
                    },
                    {
                        label: 'erick',
                        kind: monaco.languages.CompletionItemKind.Text
                    },
                    {
                        label: 'testing',
                        kind: monaco.languages.CompletionItemKind.Keyword,
                        insertText: {
                            value: 'testing(${1:condition})'
                        }
                    },
                    {
                        label: 'ifelse',
                        kind: monaco.languages.CompletionItemKind.Snippet,
                        insertText: {
                            value: [
                                'if (${1:condition}) {',
                                '\t$0',
                                '} else {',
                                '\t',
                                '}'
                            ].join('\n')
                        },
                        documentation: 'If-Else Statement'
                    }
                ]
            }
        });
        function getCode() {
            return [
                'publico clase miClase{',
                'publico entero atributo1 = 0;',
                'publico caracter atributo_cadena[25] = "erick";',
                'miClase(entero param1, cadena param2){ este.atributo1 = param1; este.atributo_cadena = param2;',
                '} }',
            ].join('\n');;
        }
        var editor1 = monaco.editor.create(document.getElementById('editor1'), {
            theme: 'myCoolTheme',
            value: getCode(),
            language: 'gcc-compiler'
        });
        var editor2 = monaco.editor.create(document.getElementById('editor2'), {
            theme: 'myCoolTheme',
            value: getCode(),
            language: 'gcc-compiler'
        });
    });
</script>