Skip to content

Instantly share code, notes, and snippets.

@jonathanhudak

jonathanhudak/index.html

Created March 15, 2023 04:09
Show Gist options
  • Save jonathanhudak/a4a55c0c750546598b897bd0ca47def4 to your computer and use it in GitHub Desktop.
Save jonathanhudak/a4a55c0c750546598b897bd0ca47def4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://esm.sh/monaco-editor@0.34.1/min/vs/editor/editor.main.css"/>
</head>
<body>
<h1>Hello World</h1>
<div id="container" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
</body>
<script type="module">
import * as monaco from 'https://esm.sh/monaco-editor@0.34.1';
import editorWorker from "https://esm.sh/monaco-editor/esm/vs/editor/editor.worker?worker";
import jsonWorker from "https://esm.sh/monaco-editor/esm/vs/language/json/json.worker?worker";
self.MonacoEnvironment = {
getWorker: function (moduleId, label) {
console.dir({ moduleId, label });
if (label === 'editorWorkerService') {
return editorWorker();
} else if (label === "json") {
return jsonWorker();
}
}
}
let container = document.getElementById('container');
monaco.editor.create(container, {
value: JSON.stringify({hello: "world"}, null, 2),
language: 'json',
minimap: {
enabled: false,
}
})
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment