Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@pachacamac

pachacamac/monaco-editor.html

Last active September 7, 2020 22:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pachacamac/53b4b2e513fd903d0b77062b9fba64be to your computer and use it in GitHub Desktop.
Save pachacamac/53b4b2e513fd903d0b77062b9fba64be to your computer and use it in GitHub Desktop.
Download ZIP
monaco editor
Raw
monaco-editor.html
<!doctype html>
<head>
<title>Frontend Playground</title>
<meta charset=utf8>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" data-name="vs/editor/editor.main" href="https://unpkg.com/monaco-editor@0.8.3/min/vs/editor/editor.main.css">
<script type="text/javascript" src="https://unpkg.com/monaco-editor@0.8.3/min/vs/loader.js"></script>
<style>
html, body, #editor {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#change-content {
z-index: 99999;
position: absolute;
right: 1em;
top: 1em;
}
</style>
</head>
<body>
<div id="editor"></div>
<button id="change-content">change content</button>
<script>
require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@0.8.3/min/vs' } });
window.MonacoEnvironment = { getWorkerUrl: () => proxy };
let proxy = URL.createObjectURL(new Blob([`
self.MonacoEnvironment = {
baseUrl: 'https://unpkg.com/monaco-editor@0.8.3/min/'
};
importScripts('https://unpkg.com/monaco-editor@0.8.3/min/vs/base/worker/workerMain.js');
`], { type: 'text/javascript' }));
let editor;
require(["vs/editor/editor.main"], function () {
editor = monaco.editor.create(document.getElementById('editor'), {
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
language: 'javascript',
theme: 'vs-dark'
});
editor.addListener('didType', () => {
console.log(editor.getValue());
});
});
document.getElementById('change-content').addEventListener('click', (e)=>{
editor.setValue(`
from time import time
def say_what(t):
print(f"it's time to high five motherlicka! {t}")
say_what(time.time)
`.trim());
monaco.editor.setModelLanguage(editor.getModel(), 'python')
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment