Skip to content

Instantly share code, notes, and snippets.

@nepsilon
Created September 27, 2016 05:25
Show Gist options
  • Save nepsilon/070daa5f631c4e56237f28775aa31158 to your computer and use it in GitHub Desktop.
Save nepsilon/070daa5f631c4e56237f28775aa31158 to your computer and use it in GitHub Desktop.
One-line browser notepad πŸ“ β€” First published in fullweb.io issue #67

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>
@nepsilon
Copy link
Author

@sorrat Thanks for the link!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment