Build a VSCode Coding IDE With Syntax Highlighting Using Monaco Editor in Browser Using JS

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Monaco Editor with Syntax Highlighting</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        #editor {
            height: 800px;
            border: 1px solid #ddd;
            margin-top: 20px;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs/loader.min.js"></script>
</head>

<body>

    <div class="container">
        <h1 class="mt-4">Monaco Editor Syntax Highlighting</h1>

        <div class="form-group mb-3">
            <label for="languageSelect">Select Language:</label>
            <select class="form-select" id="languageSelect">
                <option value="javascript">JavaScript</option>
                <option value="css">CSS</option>
                <option value="html">HTML</option>
                <option value="json">JSON</option>
            </select>
        </div>

        <div class="form-group mb-3">
            <label for="themeSelect">Select Theme:</label>
            <select class="form-select" id="themeSelect">
                <option value="vs-light">Light</option>
                <option value="vs-dark">Dark</option>
                <option value="hc-black">High Contrast</option>

                <option value="dracula">Dracula</option>
                <option value="solarized-light">Solarized Light</option>
                <option value="solarized-dark">Solarized Dark</option>
                <option value="github-dark">GitHub Dark</option>
                <option value="monokai">Monokai</option>
            </select>
        </div>

        <div id="editor"></div>
    </div>

    <script>
        // Load Monaco Editor using AMD
        require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs' } });
        require(['vs/editor/editor.main'], function () {

            // Create the editor instance
            const editor = monaco.editor.create(document.getElementById('editor'), {
                value: `// Write your code here\nconsole.log('Hello, Monaco!');`,
                language: 'javascript',
                theme: 'vs-light'
            });

            monaco.editor.defineTheme('dracula', {
                base: 'vs-dark',
                inherit: true,
                rules: [
                    { token: '', background: '282a36', foreground: 'f8f8f2' },
                    { token: 'comment', foreground: '6272a4' },
                    { token: 'keyword', foreground: 'ff79c6' },
                    { token: 'string', foreground: 'f1fa8c' }
                ],
                colors: {
                    'editor.background': '#282a36'
                }
            });
    
            monaco.editor.defineTheme('solarized-light', {
                base: 'vs',
                inherit: true,
                rules: [
                    { token: '', foreground: '586e75', background: 'fdf6e3' },
                    { token: 'comment', foreground: '93a1a1' },
                    { token: 'keyword', foreground: '859900' },
                    { token: 'string', foreground: '2aa198' }
                ],
                colors: {
                    'editor.background': '#fdf6e3'
                }
            });
    
            monaco.editor.defineTheme('solarized-dark', {
                base: 'vs-dark',
                inherit: true,
                rules: [
                    { token: '', foreground: '839496', background: '002b36' },
                    { token: 'comment', foreground: '586e75' },
                    { token: 'keyword', foreground: 'cb4b16' },
                    { token: 'string', foreground: '2aa198' }
                ],
                colors: {
                    'editor.background': '#002b36'
                }
            });
    
            monaco.editor.defineTheme('github-dark', {
                base: 'vs-dark',
                inherit: true,
                rules: [
                    { token: '', foreground: 'c9d1d9', background: '0d1117' },
                    { token: 'comment', foreground: '8b949e' },
                    { token: 'keyword', foreground: 'ff7b72' },
                    { token: 'string', foreground: 'a5d6ff' }
                ],
                colors: {
                    'editor.background': '#0d1117'
                }
            });
    
            monaco.editor.defineTheme('monokai', {
                base: 'vs-dark',
                inherit: true,
                rules: [
                    { token: '', foreground: 'f8f8f2', background: '272822' },
                    { token: 'comment', foreground: '75715e' },
                    { token: 'keyword', foreground: 'f92672' },
                    { token: 'string', foreground: 'a6e22e' }
                ],
                colors: {
                    'editor.background': '#272822'
                }
            });

            // Change language based on selection
            document.getElementById('languageSelect').addEventListener('change', function () {
                const newLanguage = this.value;
                monaco.editor.setModelLanguage(editor.getModel(), newLanguage);
            });

            // Change theme based on selection
            document.getElementById('themeSelect').addEventListener('change', function () {
                const newTheme = this.value;
                monaco.editor.setTheme(newTheme);
            });
        });
    </script>

</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

<!DOCTYPE html>

<head>

<title>Monaco Editor with Syntax Highlighting</title>

<style>

#editor {

height: 800px;

border: 1px solid #ddd;

margin-top: 20px;

}

</style>

</head>

<body>

<h1 class="mt-4">Monaco Editor Syntax Highlighting</h1>

<label for="languageSelect">Select Language:</label>

<option value="javascript">JavaScript</option>

</select>

</div>

<label for="themeSelect">Select Theme:</label>

<option value="vs-light">Light</option>

<option value="hc-black">High Contrast</option>

<option value="dracula">Dracula</option>

<option value="solarized-light">Solarized Light</option>

<option value="solarized-dark">Solarized Dark</option>

<option value="github-dark">GitHub Dark</option>

<option value="monokai">Monokai</option>

</select>

</div>

</div>

// Load Monaco Editor using AMD

require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs' } });

require(['vs/editor/editor.main'], function () {

// Create the editor instance

const editor = monaco.editor.create(document.getElementById('editor'), {

value: `// Write your code here\nconsole.log('Hello, Monaco!');`,

language: 'javascript',

theme: 'vs-light'

});

monaco.editor.defineTheme('dracula', {

base: 'vs-dark',

inherit: true,

rules: [

{ token: '', background: '282a36', foreground: 'f8f8f2' },

{ token: 'comment', foreground: '6272a4' },

{ token: 'keyword', foreground: 'ff79c6' },

{ token: 'string', foreground: 'f1fa8c' }

colors: {

'editor.background': '#282a36'

}

});

monaco.editor.defineTheme('solarized-light', {

base: 'vs',

inherit: true,

rules: [

{ token: '', foreground: '586e75', background: 'fdf6e3' },

{ token: 'comment', foreground: '93a1a1' },

{ token: 'keyword', foreground: '859900' },

{ token: 'string', foreground: '2aa198' }

colors: {

'editor.background': '#fdf6e3'

}

});

monaco.editor.defineTheme('solarized-dark', {

base: 'vs-dark',

inherit: true,

rules: [

{ token: '', foreground: '839496', background: '002b36' },

{ token: 'comment', foreground: '586e75' },

{ token: 'keyword', foreground: 'cb4b16' },

{ token: 'string', foreground: '2aa198' }

colors: {

'editor.background': '#002b36'

}

});

monaco.editor.defineTheme('github-dark', {

base: 'vs-dark',

inherit: true,

rules: [

{ token: '', foreground: 'c9d1d9', background: '0d1117' },

{ token: 'comment', foreground: '8b949e' },

{ token: 'keyword', foreground: 'ff7b72' },

{ token: 'string', foreground: 'a5d6ff' }

colors: {

'editor.background': '#0d1117'

}

});

monaco.editor.defineTheme('monokai', {

base: 'vs-dark',

inherit: true,

rules: [

{ token: '', foreground: 'f8f8f2', background: '272822' },

{ token: 'comment', foreground: '75715e' },

{ token: 'keyword', foreground: 'f92672' },

{ token: 'string', foreground: 'a6e22e' }

colors: {

'editor.background': '#272822'

}

});

// Change language based on selection

document.getElementById('languageSelect').addEventListener('change', function () {

const newLanguage = this.value;

monaco.editor.setModelLanguage(editor.getModel(), newLanguage);

});

// Change theme based on selection

document.getElementById('themeSelect').addEventListener('change', function () {

const newTheme = this.value;

monaco.editor.setTheme(newTheme);

});

</script>

</body>

</html>

Build a VSCode Coding IDE With Syntax Highlighting Using Monaco Editor in Browser Using JS

Comments

Leave a Reply Cancel reply

Archives