How to use monaco-editor-textmate - 4 common examples

const content = require("./../../../../tool-plugins/vscode/grammar/ballerina-grammar/syntaxes/ballerina.tmLanguage").default;
    const registry = new Registry({
        getGrammarDefinition: async (scopeName) => {
            return {
                format: "plist",
                content
            };
        }
    });

    monaco.languages.register({ id: "ballerina"});
    // map of monaco "language id's" to TextMate scopeNames
    const grammars = new Map();
    grammars.set("ballerina", "source.ballerina");

    await wireTmGrammars(monaco, registry, grammars);

    const balCodeSnippets = document.querySelectorAll("code.language-ballerina");
    balCodeSnippets.forEach((snippet) => {
        if (snippet.parentElement) {
            snippet.parentElement.classList.add("ballerina-snippet");
        }
        monaco.editor.colorize(snippet.textContent as string, "ballerina", {})
            .then((coloredString) => {
                snippet.innerHTML = coloredString;
            });
    });
}

const registry = new Registry({
    getGrammarDefinition: async () => ({
      format: 'json',
      content: await import(/* webpackPrefetch: 0 */ 'src/external/toml.tmLanguage.json').then(
        data => {
          return JSON.stringify(data)
        }
      ),
    }),
  })

  // map of monaco "language id's" to TextMate scopeNames
  const grammars = new Map()
  grammars.set('toml', 'toml')

  await wireTmGrammars(monaco, registry, grammars)
}

// Setup our registry of different
        const registry = new Registry({
            getGrammarDefinition: async (_scopeName) => {
                return {
                    format: 'json',
                    content: tmlanguageJSON
                };
            }
        });

        // map of monaco "language id's" to TextMate scopeNames
        const grammars = new Map();
        grammars.set('python', 'source.python');

        // Wire everything together.
        await wireTmGrammars(monacoEditor, registry, grammars);

        // Indicate to the callback that we're done.
        loadingFinished();
    } catch (e) {
        loadingFinished(e);
    }
}

const registry = new Registry({
        getGrammarDefinition: async (scopeName) => {
            return {
                format: 'plist',
                content: require("./tmballerina.plist").default
            }
        }
    });
 
    monaco.languages.register({ id: "ballerina"});
    // map of monaco "language id's" to TextMate scopeNames
    const grammars = new Map();
    grammars.set('ballerina', 'source.ballerina');
 
    await wireTmGrammars(monaco, registry, grammars);
 
    const balCodeSnippets = document.querySelectorAll("code.language-ballerina");
    balCodeSnippets.forEach((snippet) => {
        if (snippet.parentElement) {
            snippet.parentElement.classList.add("ballerina-snippet");
        }
        monaco.editor.colorize(snippet.textContent, "ballerina", {})
            .then((coloredString) => {
                snippet.innerHTML = coloredString;
            });
    });
}