nepsilon/one-line-browser-notepad.md

## one-line-browser-notepad.md

      
    Raw
  

              one-line-browser-notepad.md
            
          
    One-line browser notepad 📝

Sometimes you just need to quickly take some notes.
A trick is to use the data: scheme with data:text/html to show just a piece of HTML in your browser.
Then using the mighty contentEditable to make the whole thing editable.
To copy/paste into your browser address bar:
data:text/html,<html contenteditable>
And from there you can get fancier. Adding better styling:
data:text/html,<html contenteditable autofocus style="font: 500 1rem/1.5 Menlo, monospace; background:#fafafa"> 
From there, no limit: Turning it into a full editor:
From Jake Moffatt:
data:text/html, <style type="text/css">#e{position:absolute;top:0;right:0;bottom:0;left:0;}</style>
<div id="e"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/ruby");</script>