Watch video on YouTube

JavaScript
3 Ways to Build Your Own Code Editor

index.html

<!-- AZUL CODING --------------------------------------- -->
<!-- JavaScript - 3 Ways to Build Your Own Code Editor -->
<!-- https://youtu.be/OZ0rioZ4yl4 -->


<!DOCTYPE html>
<html>
    <head>
        <title>Azul Coding</title>
        <style>
            body {
                margin: 30px;
                background-color: #03506E;
            }
            h1, h2 {
                font-family: 'Golos Text', sans-serif;
                color: white;
                font-weight: 700;
            }
            h2 {
                margin-top: 50px;
                font-size: 20px;
            }
            code-input {
                margin: 0 !important;
            }
            #monaco-editor {
                height: 300px;
            }
        </style>



        <!-- code-input -->
        <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/highlight.min.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/languages/javascript.min.js"></script>

        <!-- More themes: https://highlightjs.org/demo -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/styles/tomorrow-night-blue.min.css">
        
        <script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.7/code-input.min.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.7/code-input.min.css">
        
        <!-- Optional plugins -->
        <!-- https://github.com/WebCoder49/code-input/tree/main/plugins#readme -->
        <script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.7/plugins/indent.min.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.7/plugins/auto-close-brackets.min.js"></script>
        
        <script>
            codeInput.registerTemplate("syntax-highlighted",
                new codeInput.templates.Hljs(
                    hljs,
                    [   // optional plugins
                        new codeInput.plugins.Indent(),
                        new codeInput.plugins.AutoCloseBrackets()
                    ]
                )
            );

            // get the current code: document.querySelector("code-input textarea").value;
        </script>



        <!-- CodeMirror -->
        <script type="module">
            import { EditorView, basicSetup } from "https://esm.sh/codemirror@6.0.2";
            import { javascript } from "https://esm.sh/@codemirror/lang-javascript@6.2.4";

            // optional theme
            import { oneDark } from "https://esm.sh/@codemirror/theme-one-dark@6.1.3";

            window.mirrorEditor = new EditorView({
                parent: document.getElementById("code-mirror-editor"),
                doc: 'console.log("Hello, World!");',
                extensions: [basicSetup, javascript(), oneDark],
            });

            // features included in basicSetup:
            // https://codemirror.net/examples/basic/

            // get the current code: mirrorEditor.state.doc.toString();
        </script>



        <!-- Monaco -->
        <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.53.0/min/vs/loader.js"></script>
        <script type="module">
            require.config({
                paths: {
                    "vs": "https://cdn.jsdelivr.net/npm/monaco-editor@0.53.0/min/vs"
                }
            });

            require(["vs/editor/editor.main"], function() {
                window.monacoEditor = monaco.editor.create(
                    document.getElementById("monaco-editor"),
                    {
                        value: 'console.log("Hello, World!");',
                        language: "javascript",
                        automaticLayout: true,
                        theme: "vs-dark"

                        // full list of options:
                        // https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IStandaloneEditorConstructionOptions.html
                    }
                );
            });

            // get the current code: monacoEditor.getValue();
        </script>
    </head>
    <body>
        <h2>code-input</h2>
        <code-input template="syntax-highlighted" language="JavaScript">
            <textarea data-code-input-fallback>console.log("Hello, World!");</textarea>
        </code-input>

        <h2>CodeMirror</h2>
        <div id="code-mirror-editor"></div>

        <h2>Monaco</h2>
        <div id="monaco-editor"></div>
    </body>
</html>

Help support the channel

Subscribe

Discover more

4 Open-Source Windows and Android Apps

Visit Express Apps

Learn a New Language for Free With No Ads

Visit Ablas

Royalty-Free Landscape Photos for Your Project

Visit Quetzal
More videos