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/