Turn browser into notepad with one line of code

5,394 0
Summary

A browser can be transformed into a basic notepad by entering `data:text/html, ` into the address bar. This functionality leverages Data URIs to render HTML and relies on the HTML5 `contenteditable` property. Developers have extended this concept to include features like syntax highlighting for various programming languages, such as Ruby and Python, by integrating libraries like Ace editor. Further enhancements demonstrate how to implement autofocus using a `textarea` element or create dynamic visual feedback, such as a changing background color, based on user editing activity.

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  to ace/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/

HTML5 BROWSER EDITOR

  RELATED

  COMMENTS

0

No comment for this article.