Mix-Liten/Notepad.md

## Notepad.md

      
    Raw
  

              Notepad.md
            
          
Text editor
data:text/html;charset=utf-8;base64,PGh0bWwgY29udGVudGVkaXRhYmxlPjx0aXRsZT5Ob3RlcGFkPC90aXRsZT48Ym9keSBvbmxvYWQ9ImRvY3VtZW50LmJvZHkuZm9jdXMoKSIgc3R5bGU9ImZvbnQtZmFtaWx5OkNvbnNvbGFzLCdDb3VyaWVyIE5ldycsbW9ub3NwYWNlLEFyaWFsLHNhbnMtc2VyaWY7Zm9udC1zaXplOjE2cHg7bGluZS1oZWlnaHQ6MS41O3BhZGRpbmc6MjBweDtiYWNrZ3JvdW5kLWNvbG9yOnJnYig0MCw0Miw1NCk7Y29sb3I6cmdiKDI0OCwyNDgsMjQyKSIgc3BlbGxjaGVjaz0idHJ1ZSI+PC9ib2R5PjwvaHRtbD4=
or
data:text/html;charset=utf-8,<html contenteditable><title>Notepad</title><body onload="document.body.focus()" style="font-family:Consolas,'Courier New',monospace,Arial,sans-serif;font-size:16px;line-height:1.5;padding:20px;background-color:rgb(40,42,54);color:rgb(248,248,242)" spellcheck="true"></body></html>


Code editor, You can customize the language field in the following list
plaintext / bat / clojure / coffeescript / c / cpp / csharp / css / dart / dockerfile / elixir / go / graphql / html / ini / java / javascript / julia / kotlin / less / lua / markdown / mdx / mysql / objective-c / perl / php / powershell / pug / python / r / razor / redis / ruby / rust / scala / scheme / scss / shell / sql / swift / systemverilog / typescript / vb / xml / yaml / json
data:text/html;charset=utf-8,<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>Notepad</title></head><body style="margin:0;height:100vh"><div id="container" style="width:100%;height:100%"></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"}});require(["vs/editor/editor.main"],function(){monaco.editor.create(document.getElementById("container"),{language:"mdx",theme:"vs-dark",});});</script></body></html>


Code editor with execute
data:text/html,<body oninput='i.srcdoc=h.value+"<style>"+c.value+"</style><script>"+j.value+"<\/script>"'><style>html{margin:0;padding:0}iframe,textarea{width:100%;height:50%}body{margin:0}textarea{width:33.33%;font-size:18px;padding:.5em;resize:none}textarea::-webkit-scrollbar{width:9px}textarea::-webkit-scrollbar-track{background:rgb(238,238,238)}textarea::-webkit-scrollbar-thumb{border-radius:4.5px;background-color:rgb(187,187,187)}textarea::-webkit-scrollbar-thumb:hover{background:rgb(204,204,204)}</style><textarea placeholder="HTML" id="h"></textarea><textarea placeholder="CSS" id="c"></textarea><textarea placeholder="JS" id="j"></textarea><iframe id="i" frameborder="0"></iframe><script>document.querySelectorAll("textarea").forEach(t=>t.addEventListener("keydown",function(t){var e,s;"Tab"==t.key&&(t.preventDefault(),e=this.selectionStart,s=this.selectionEnd,this.value=this.value.substring(0,e)+"%C2%A0%C2%A0"+this.value.substring(s),this.selectionStart=this.selectionEnd=e+1)}))</script></body>


Drawing board
data:text/html;charset=utf-8;base64,PGNhbnZhcyBpZD0idiI+PHNjcmlwdD5kPWRvY3VtZW50LGQuYm9keS5zdHlsZS5tYXJnaW49MCxQPSJvbnBvaW50ZXIiLGM9di5nZXRDb250ZXh0YDJkYCx2LndpZHRoPWlubmVyV2lkdGgsdi5oZWlnaHQ9aW5uZXJIZWlnaHQsYy5saW5lV2lkdGg9MixmPTAsZFtQKyJkb3duIl09ZT0+e2Y9ZS5wb2ludGVySWQrMTtlLnByZXZlbnREZWZhdWx0KCk7Yy5iZWdpblBhdGgoKTtjLm1vdmVUbyhlLngsZS55KX07ZFtQKyJtb3ZlIl09ZT0+e2Y9PWUucG9pbnRlcklkKzEmJmMubGluZVRvKGUueCxlLnkpO2Muc3Ryb2tlKCl9LGRbUCsidXAiXT1fPT5mPTA8L3NjcmlwdD48L2NhbnZhcz4=
or
data:text/html,<canvas id="v"><script>d=document,d.body.style.margin=0,P="onpointer",c=v.getContext`2d`,v.width=innerWidth,v.height=innerHeight,c.lineWidth=2,f=0,d[P+"down"]=e=>{f=e.pointerId+1;e.preventDefault();c.beginPath();c.moveTo(e.x,e.y)};d[P+"move"]=e=>{f==e.pointerId+1&&c.lineTo(e.x,e.y);c.stroke()},d[P+"up"]=_=>f=0</script></canvas>