Created
March 5, 2023 11:20
-
-
Save developersharif/9c54ca8cdf00b1fc242ba4127000837a to your computer and use it in GitHub Desktop.
Monaco Editor Example with multiple languages
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Monaco Editor</title> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/min/vs/editor/editor.main.css"> | |
| </head> | |
| <body> | |
| <select id="language-select"> | |
| <option value="javascript">JavaScript</option> | |
| <option value="html">html</option> | |
| <option value="typescript">TypeScript</option> | |
| <option value="python">Python</option> | |
| <option value="java">Java</option> | |
| <option value="c">C</option> | |
| <option value="cpp">C++</option> | |
| <option value="csharp">C#</option> | |
| <option value="go">Go</option> | |
| <option value="php">PHP</option> | |
| </select> | |
| <div id="editor" style="height: 500px"></div> | |
| <script src="https://unpkg.com/[email protected]/min/vs/loader.js"></script> | |
| <script> | |
| require.config({ paths: { 'vs': 'https://unpkg.com/[email protected]/min/vs' } }); | |
| require(['vs/editor/editor.main'], function () { | |
| var editor = monaco.editor.create(document.getElementById('editor'), { | |
| value: 'function hello() {\n\tconsole.log("Hello, world!");\n}', | |
| language: 'javascript' | |
| }); | |
| var languageSelect = document.getElementById('language-select'); | |
| languageSelect.addEventListener('change', function () { | |
| var language = languageSelect.value; | |
| monaco.editor.setModelLanguage(editor.getModel(), language); | |
| }); | |
| monaco.editor.onDidChangeModelLanguage(function (event) { | |
| var selectedLanguage = event.model._languageIdentifier.language; | |
| // Change the editor value based on the selected language | |
| switch (selectedLanguage) { | |
| case "javascript": | |
| editor.setValue("console.log('Hello, world!');"); | |
| break; | |
| case "html": | |
| editor.setValue("<html>\n <body>\n <h1>Hello, world!</h1>\n </body>\n</html>"); | |
| break; | |
| case "php": | |
| editor.setValue("<?php\n echo 'Hello from world!';\n?>"); | |
| break; | |
| // Add more cases for other languages | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment