44 lines
1.6 KiB
Cheetah
44 lines
1.6 KiB
Cheetah
<div class="container">
|
|
<div class="columns">
|
|
<div class="column col-6 col-mx-auto">
|
|
<input class="form-input" type="text" id="description" placeholder="Gist description">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="columns">
|
|
<div class="column col-6 col-mx-auto">
|
|
<div id="monaco-editor" style="height: 20em"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" src="https://unpkg.com/monaco-editor@latest/min/vs/loader.js"></script>
|
|
<script>
|
|
require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@latest/min/vs' }});
|
|
|
|
// Before loading vs/editor/editor.main, define a global MonacoEnvironment that overwrites
|
|
// the default worker url location (used when creating WebWorkers). The problem here is that
|
|
// HTML5 does not allow cross-domain web workers, so we need to proxy the instantiation of
|
|
// a web worker through a same-domain script
|
|
window.MonacoEnvironment = {
|
|
getWorkerUrl: function(workerId, label) {
|
|
return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
|
|
self.MonacoEnvironment = {
|
|
baseUrl: 'https://unpkg.com/monaco-editor@latest/min/'
|
|
};
|
|
importScripts('https://unpkg.com/monaco-editor@latest/min/vs/base/worker/workerMain.js');`
|
|
)}`;
|
|
}
|
|
};
|
|
|
|
require(["vs/editor/editor.main"], function () {
|
|
monaco.editor.create(document.querySelector('#monaco-editor'), {
|
|
value: `function x() {
|
|
console.log("Hello world!");
|
|
}`,
|
|
language: 'html',
|
|
theme: 'vs-dark',
|
|
});
|
|
});
|
|
</script>
|