Building a Web-based Code Editor

[Steve Raw]

I'm currently implementing a web-based code editor into my web project (Project Chromosphere.com). I think some of you might be interested. It's a work in progress, but you can see it here: https://chromosphere.com/chromosphere/scripts/js/ui/sandbox/vsCode/[^] I considered creating a web-based code editor from scratch. Then, I realized the amount of time and effort to embark on such a thing would be ridiculous. I don't want to spend 1000 hours developing a web-based code editor. So, I'm going with a third-party solution. Microsoft VS Code[^] offers a good solution. The VS Code code editors are powered by the Monaco Editor[^]. That's the code editor that you are actually embedding into your web page. To implement this web-based code editor in its most basic form is easy. See the HTML document source code below:

Simple Example Code Editor





    require.config({
        paths: { vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.27.0/min/vs" }
    });
    require(\["vs/editor/editor.main"\], function () {
        var editor = monaco.editor.create(document.getElementById("container"), {
            value: 'function hello() {\\n    alert(\\'Hello World!\\');\\n}',
            language: 'javascript'
        });

        monaco.editor.defineTheme("jScriptTheme", {
            base: 'vs-dark',
            inherit: true,
            rules: \[
                { token: '', foreground: 'aaaaaa' },
                { token: 'invalid', foreground: 'ff3333' },
                { token: 'emphasis', fontStyle: 'italic' },
                { token: 'strong', fontStyle: 'bold' },
                { token: 'variable',</x-turndown>

[Richard Deeming]

You should probably post this as a tip rather than a message in a forum that will soon be buried on page 42. :)

---

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

[VirtuNetz Sept Web App]

Here a Expert Custom Web development Company