This is the code shared by Jose on codewall. When you type data:text/html, into the address bar of the browser and press enter, the browser will turn into a notepad which you can edit.
Why it works?
This uses Data URI’s format and it tells the browser to render HTML. But contenteditable is a property of HTML5, so this can only work in the web browser which supports this property.
Here are some interesting contents.
Some people make some changes to the code encouraged by the idea of Jose.
- jakeonrails wrote one line of code which supports Ruby code highlighting. Here is the code:
data:text/html,
- slawdan reminds that if we change
ace/mode/ruby toace/mode/python. Then the editor will highlight Python codes.You can do similar things for other languages. - You can use textarea and make it “invisible” if you want autofocus.
data:text/html, <textareastyle="font-size: 1.5em; width: 100%; height: 100%; border: none; outline: none"autofocus />
- The following code will change the background color when editing, when stopping editing, the background color will be white.
data:text/html, <html><head><linkhref='http://fonts.googleapis.com/css?family=Open+Sans'rel='stylesheet'type='text/css'><styletype="text/css"> html { font-family: "Open Sans" } * { -webkit-transition: all linear 1s; }style><script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#ff"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}script>head><bodycontenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">
Source : http://blog.jobbole.com/32823/
