5 ms·

Sublime Text Flavor with Ace data:text/html,<title>DoJS</title><style type="text/css">#e{font-size: 16px; position:absolute;top:0;right:0;bottom:0;left:0;}</

by thinkxl 13y ago

Sublime Text Flavor with Ace data:text/html,<title>DoJS</title><style type="text/css">#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" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/javascript");</script>

modarts 13y ago
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/
fizerkhan 13y ago
I love it. Data URL make editor possible in a single tweet.
Offler 13y ago
You need to URL encode it for it to work in Firefox. data:text/html, <style type%3D"text%2Fcss">%23e{position%3Aabsolute%3Btop%3A0%3Bright%3A0%3Bbottom%3A0%3Bleft%3A0%3B}<%2Fstyle><div id%3D"e"><%2Fdiv><script src%3D"http%3A%2F%2Fd1n0x3qji82z53.cloudfront.net%2Fsrc-min-noconflict%2Face.js" type%3D"text%2Fjavascript" charset%3D"utf-8"><%2Fscript><script>var e%3Dace.edit("e")%3Be.setTheme("ace%2Ftheme%2Fmonokai")%3Be.getSession().setMode("ace%2Fmode%2Fruby")%3B<%2Fscript>
- thinkxl 13y ago
  Cool, thanks!

by thinkxl 13y ago

modarts 13y ago

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/

fizerkhan 13y ago

I love it. Data URL make editor possible in a single tweet.

Offler 13y ago

You need to URL encode it for it to work in Firefox. data:text/html, <style type%3D"text%2Fcss">%23e{position%3Aabsolute%3Btop%3A0%3Bright%3A0%3Bbottom%3A0%3Bleft%3A0%3B}<%2Fstyle><div id%3D"e"><%2Fdiv><script src%3D"http%3A%2F%2Fd1n0x3qji82z53.cloudfront.net%2Fsrc-min-noconflict%2Face.js" type%3D"text%2Fjavascript" charset%3D"utf-8"><%2Fscript><script>var e%3Dace.edit("e")%3Be.setTheme("ace%2Ftheme%2Fmonokai")%3Be.getSession().setMode("ace%2Fmode%2Fruby")%3B<%2Fscript>

thinkxl 13y ago
Cool, thanks!