\n HTML Playground\n

\n \n

\n \n $\"Essepage\"$ \n Essepage\n ❤️\n \n \n

\n\n\t\t\n\t

\n\t\t

({monacoContent:`\\n\\n\\t\\n\\t\\tPage Title\\n\\t\\t\\n\\t\\n\\t\\n\\t\\t

Hello World! 👋

\\n\\t\\n`,monacoLanguage:'html',monacoPlaceholder:true,monacoPlaceholderText:'HTML code here',monacoLoader:true,monacoFontSize:'15px',monacoId:$id('monaco-editor'),setupMonacoEditor(e){e.onDidChangeModelContent((async o=>{this.monacoContent=e.getValue();this.updatePlaceholder(this.monacoContent);this.applyHTML(this.monacoContent)}))},monacoEditorFocus(){document.getElementById(this.monacoId).editor.focus()},updatePlaceholder:function(e){if(e==''){this.monacoPlaceholder=true;return}this.monacoPlaceholder=false},async init(){const e=window.location.search;const o=new URLSearchParams(e);const t=o.getAll('code');const n=o.get('code');if(n){this.monacoContent=n}Split(['#monacoId','#previewId'],{sizes:[50,50],minSize:50,gutterSize:10,snapOffset:10});if(typeof _amdLoaderGlobal=='undefined'){await Essepage.loadScript('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.0/min/vs/loader.js')}monacoLoaderInterval=setInterval((()=>{if(typeof _amdLoaderGlobal!=='undefined'){require.config({paths:{vs:'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.0/min/vs'}});let e=URL.createObjectURL(new Blob([`self.MonacoEnvironment = { baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.0/min/' }; importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.0/min/vs/base/worker/workerMain.js');`],{type:'text/javascript'}));window.MonacoEnvironment={getWorkerUrl:()=>e};require(['vs/editor/editor.main'],(async()=>{const e={base:'vs-dark',inherit:true,rules:[{background:'0C1021',token:''},{foreground:'aeaeae',token:'comment'},{foreground:'d8fa3c',token:'constant'},{foreground:'ff6400',token:'entity'},{foreground:'fbde2d',token:'keyword'},{foreground:'fbde2d',token:'storage'},{foreground:'61ce3c',token:'string'},{foreground:'61ce3c',token:'meta.verbatim'},{foreground:'8da6ce',token:'support'},{foreground:'ab2a1d',fontStyle:'italic',token:'invalid.deprecated'},{foreground:'f8f8f8',background:'9d1e15',token:'invalid.illegal'},{foreground:'ff6400',fontStyle:'italic',token:'entity.other.inherited-class'},{foreground:'ff6400',token:'string constant.other.placeholder'},{foreground:'becde6',token:'meta.function-call.py'},{foreground:'7f90aa',token:'meta.tag'},{foreground:'7f90aa',token:'meta.tag entity'},{foreground:'ffffff',token:'entity.name.section'},{foreground:'d5e0f3',token:'keyword.type.variant'},{foreground:'f8f8f8',token:'source.ocaml keyword.operator.symbol'},{foreground:'8da6ce',token:'source.ocaml keyword.operator.symbol.infix'},{foreground:'8da6ce',token:'source.ocaml keyword.operator.symbol.prefix'},{fontStyle:'underline',token:'source.ocaml keyword.operator.symbol.infix.floating-point'},{fontStyle:'underline',token:'source.ocaml keyword.operator.symbol.prefix.floating-point'},{fontStyle:'underline',token:'source.ocaml constant.numeric.floating-point'},{background:'ffffff',token:'text.tex.latex meta.function.environment'},{background:'7a96fa',token:'text.tex.latex meta.function.environment meta.function.environment'},{foreground:'fbde2d',token:'text.tex.latex support.function'},{foreground:'ffffff',token:'source.plist string.unquoted'},{foreground:'ffffff',token:'source.plist keyword.operator'}],colors:{'editor.foreground':'#F8F8F8','editor.background':'#0C1021','editor.selectionBackground':'#253B76','editor.lineHighlightBackground':'#FFFFFF0F','editorCursor.foreground':'#FFFFFFA6','editorWhitespace.foreground':'#FFFFFF40'}};monaco.editor.defineTheme('blackboard',e);document.getElementById(this.monacoId).editor=monaco.editor.create($refs.monacoEditorElement,{value:this.monacoContent,theme:'vs',readOnly:false,minimap:{enabled:false},fontSize:this.monacoFontSize,lineNumbersMinChars:2,automaticLayout:true,language:this.monacoLanguage,overviewRulerBorder:false,lineDecorationsWidth:0,renderLineHighlight:'none',accessibilitySupport:'off'});this.setupMonacoEditor(document.getElementById(this.monacoId).editor);this.updatePlaceholder(document.getElementById(this.monacoId).editor.getValue());const{emmetHTML:o,emmetCSS:t,emmetJSX:n,expandAbbreviation:r,registerCustomSnippets:a}=await import('https://esm.sh/emmet-monaco-es@5.5.0');o(monaco,['html'])}));clearInterval(monacoLoaderInterval);this.monacoLoader=false;this.applyHTML(this.monacoContent)}}),50)},applyHTML(e){const o=e;const t=document.getElementById('iFrame');if(t===undefined||t===null){return}const n=t.contentWindow.document;const r=new DOMParser;const a=r.parseFromString(o,'text/html');const i=a.documentElement?.getAttribute('lang')?.trim();const d=a.head?.innerHTML?.trim();const c=a.body?.innerHTML?.trim();let s=a.head?.getElementsByTagName('title')[0]?.innerText||'HTML Playground';s=s.replace(/\\s+/g,' ').trim();document.getElementById('title-bar').innerText=s?.trim();let l='';if(i){l=` lang="${i}"`}const m=`\\n\\n\\n ${d}\\n\\n\\n ${c}\\n\\n`;n.open();n.writeln(m);n.close();t.width=`${n.body.scrollWidth}`;t.height=`${n.body.scrollHeight}`},async setMonacoTheme(e,o){const t=e;const n=(await import(`https://esm.sh/shiki@1.23.0/dist/themes/${t}`)).default;console.log(n);const r=this.textmateThemeToMonacoTheme(n);console.log(r);o.editor.defineTheme(`${t}`,r)},textmateThemeToMonacoTheme(e){let o='rules'in e?e.rules:void 0;if(!o){o=[];const t=e.settings||e.tokenColors;for(const{scope:e,settings:n}of t){const t=Array.isArray(e)?e:[e];for(const e of t){if(n.foreground&&e){o.push({token:e,foreground:this.normalizeColor(n.foreground)})}}}}const t=Object.fromEntries(Object.entries(e.colors||{}).map((([e,o])=>[e,`#${this.normalizeColor(o)}`])));return{base:e.type==='light'?'vs':'vs-dark',inherit:false,colors:t,rules:o}},normalizeColor(e){if(!e)return e;e=(e.charCodeAt(0)===35?e.slice(1):e).toLowerCase();if(e.length===3||e.length===4)e=e.split('').map((e=>e+e)).join('');return e}});;\">\n\n

\n \n

\n\n

\n \n

\n\n

\n \n

\n\n

\n\n\t

\n\n\t\n\n

","script":"try{Essepage.afterUpdate((async()=>{__unocss_runtime.update()}))}catch(e){console.error(e)};","css":"","essepage_head":"Essepage PHP Playground\n \n \n \n \n\t\n\n\t\n\t\t\n\n\t\n\t\n\t\n\n \n\t\n \n\n\t\n\n ","essepage_body":"

HTML Playground

$\"Essepage\"$ Essepage ❤️

({monacoContent:`\\n\\n\\t\\n\\t\\tPage Title\\n\\t\\t\\n\\t\\n\\t\\n\\t\\t

Hello World! 👋

","page_datetime":"2024-01-10T15:03:00+00:00","page_title":"Essepage PHP Playground","page_hash_tags":[],"page_meta":{"title":"Essepage PHP Playground","description":"You can learn PHP online seamlessly with Essepage.","viewport":"width=device-width, initial-scale=1","og:title":"Essepage PHP Playground","og:description":"You can learn PHP online seamlessly with Essepage.","og:image":"https://i.esdrop.com/d/f/bh8rwl3bwU/EJyuLJkyVb.png"},"site_name":"","html_and_body_attributes":[],"additional_languages_in_content":[],"file_type":"essepage","page_token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3Nzg4MzkyMzMsIm5iZiI6MTc3ODgzOTIzMywiZXhwIjoxNzc4ODQyODMzLCJmcCI6ImFwaV9lc3NlcGFnZV9jb20iLCJkYXRhIjp7ImVzc2VwYWdlX3N0YXR1cyI6IjUwIn19.b9v43ir11umz6Egp1DvQfd1Z4oEMFROLy3xTU4G_Wns","s_fetch":true,"use_ssr_cache":false,"href_path":"/html-playground","article_mode":false,"cv":"20260114030113","frame_ancestors":"richardthink.com","essepage_code":"html-playground"}}