4 ms·

This is just straight up magic to me.

• Stratoscope 13y ago
  The first part: data:text/html, tells the browser to use the rest of the URL as the HTML content for a web page. The rest of it is easier to follow if it's indented like normal code: <title>DoJS</title> <style> #e { font-size: 16px; 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" charset="utf-8"> </script> <script> var e = ace.edit("e"); e.setTheme("ace/theme/monokai"); e.getSession().setMode("ace/mode/javascript"); </script> So, this is just a normal HTML page with the <html>/<head>/<body> tags omitted. Browsers don't care if those are missing. In fact, you can save this text to a .html file and open it in Chrome and it will work the same as the "magic" URL. The page creates a <div> and uses CSS to set its font size and make it fill the window. Then it loads the Ace Editor library [1] and initializes an editor instance in that <div>. Finally, it selects the Monokai theme and JavaScript syntax highlighting. (I omitted the type="text/css" and type="text/javascript" because they aren't needed.) [1] http://ace.ajax.org/ http://ace.ajax.org/