monaco-bookmark's Introduction

monaco-bookmark

data:text/html,<!doctype html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Monaco Editor</title><script src="https://unpkg.com/[email protected]/min/vs/loader.js"></script><script type="module">require.config({paths:{vs:"https://unpkg.com/[email protected]/min/vs"}});require(["vs/editor/editor.main"],function(){const i=monaco.editor.create(document.getElementById("editor"),{theme:"vs-dark"}),r=document.querySelector(".language-picker");monaco.languages.getLanguages().map(t=>t.id).sort().forEach(t=>{const o=document.createElement("option");o.textContent=t,t===i.getModel().getLanguageId()&&(o.selected=!0),r.append(o)}),r.addEventListener("change",t=>{monaco.editor.setModelLanguage(i.getModel(),t.target.value)}),window.onresize=()=>i.layout();const n=getComputedStyle(document.querySelector(".monaco-editor")),e=document.querySelector(".menu");e.style.background=n.getPropertyValue("--vscode-editor-background"),e.style.color=n.getPropertyValue("--vscode-editor-foreground"),e.style.borderBottom="1px solid"+n.getPropertyValue("--vscode-editor-lineHighlightBorder")});</script><style>body{margin:0;overflow:hidden}.menu{box-sizing:border-box;width:100%;height:auto;padding:0 5px}select{appearance:none;background-color:transparent;border:none;padding:0 1em 0 0;margin:0;width:100%;color:inherit;font-family:inherit;font-size:inherit;cursor:inherit;line-height:inherit;z-index:1;outline:0}</style></head><body><div class="menu"><select class="language-picker"></select></div><div id="editor" style="width:100%;height:100%;position:absolute;overflow:hidden"></div></body></html>

Recommend Projects