Skip to content

Instantly share code, notes, and snippets.

@m3g4p0p

m3g4p0p/monaco-from-cdn.html

Created December 30, 2020 19:08
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save m3g4p0p/167d26fbff3e6858c334a09fbd554f5c to your computer and use it in GitHub Desktop.
Save m3g4p0p/167d26fbff3e6858c334a09fbd554f5c to your computer and use it in GitHub Desktop.
Download ZIP
Loading the monaco editor from a CDN as described here: https://github.com/microsoft/monaco-editor/blob/master/docs/integrate-amd-cross.md
Raw
monaco-from-cdn.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Monaco</title>
</head>
<body>
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.21.2/min/vs/loader.min.js"></script>
<script>
require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.21.2/min/vs' } })
window.MonacoEnvironment = {
getWorkerUrl: function (workerId, label) {
return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
self.MonacoEnvironment = {
baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.21.2/min/'
};
importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.21.2/min/vs/base/worker/workerMain.js');`
)}`
}
}
require(['vs/editor/editor.main'], function () {
monaco.editor.create(document.getElementById('container'), {
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
language: 'javascript'
})
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment