Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
This bookmarklet gives you a code editor in your browser with a single click.
data:text/html, <style type="text/css">#e{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/ruby");</script>
@theunraveler

This comment has been minimized.

Copy link

commented Jan 29, 2013

Doesn't work on Firefox 18, fwiw.

@tekknolagi

This comment has been minimized.

Copy link

commented Jan 29, 2013

Confirmed, doesn't work on Firefox.

@randito

This comment has been minimized.

Copy link

commented Jan 29, 2013

Confirmed: Still pretty cool, though.

@backwardm

This comment has been minimized.

Copy link

commented Jan 29, 2013

Uh, Roger that... Confirmed Cool. Over.

@pato

This comment has been minimized.

Copy link

commented Jan 29, 2013

Works in Chrome 26 dev. This is very useful and cool!

@bhurlow

This comment has been minimized.

Copy link

commented Jan 29, 2013

way cool

@nixpulvis

This comment has been minimized.

Copy link

commented Jan 29, 2013

This reminds me of my dream to get sublime text on the web :P

@hayden-jones

This comment has been minimized.

Copy link

commented Jan 29, 2013

Firefox is garbage, what's wrong with you people?

@pdillon3

This comment has been minimized.

Copy link

commented Jan 29, 2013

What is Firefox?

@Apocryphon

This comment has been minimized.

Copy link

commented Jan 29, 2013

Wha?

@sergiotapia

This comment has been minimized.

Copy link

commented Jan 29, 2013

Woah! This is fantastic!

@antoniorosado

This comment has been minimized.

Copy link

commented Jan 30, 2013

:)

@lashkari

This comment has been minimized.

Copy link

commented Jan 30, 2013

If you URL encode the HTML, it should work in both Firefox and Chrome:

data:text/html, %3Cstyle%20type%3D%22text%2Fcss%22%3E%23e%7Bposition%3Aabsolute%3Btop%3A0%3Bright%3A0%3Bbottom%3A0%3Bleft%3A0%3B%7D%3C%2Fstyle%3E%3Cdiv%20id%3D%22e%22%3E%3C%2Fdiv%3E%3Cscript%20src%3D%22http%3A%2F%2Fd1n0x3qji82z53.cloudfront.net%2Fsrc-min-noconflict%2Face.js%22%20type%3D%22text%2Fjavascript%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3E%3Cscript%3Evar%20e%3Dace.edit(%22e%22)%3Be.setTheme(%22ace%2Ftheme%2Fmonokai%22)%3Be.getSession().setMode(%22ace%2Fmode%2Fruby%22)%3B%3C%2Fscript%3E
@markbrown4

This comment has been minimized.

Copy link

commented Jan 30, 2013

Firefox is the greatest browser of all time Losers!

@mufid

This comment has been minimized.

Copy link

commented Jan 30, 2013

Working on Chrome 25. Great! Love it!

@cswuyg

This comment has been minimized.

Copy link

commented Jan 30, 2013

So good, thanks.

@slawdan

This comment has been minimized.

Copy link

commented Jan 30, 2013

If replace the last ace/mode/rubyto ace/mode/python, you can get a Python version editor, and maybe also other languages.

@justdark

This comment has been minimized.

Copy link

commented Jan 30, 2013

cool!

@jdkanani

This comment has been minimized.

Copy link

commented Jan 30, 2013

For all browser including firefox 18 :)

https://gist.github.com/4670615

For other language: Instead of ace/mode/ruby, Use

Markdown -> ace/mode/markdown
Python -> ace/mode/python
C/C++ -> ace/mode/c_cpp
Javscript -> ace/mode/javascript
Java -> ace/mode/java
Scala- -> ace/mode/scala
CoffeeScript -> ace/mode/coffee
and
css, html, php, latex, tex, sh, sql, lua, clojure, dart, typescript, go, groovy, json, jsp, less, lisp,
lucene, perl, powershell, scss, textile, xml, yaml, xquery, liquid, diff
and many more...

For other theme: Instead of ace/theme/monokai, Use

Eclipse -> ace/theme/eclipse
TextMate -> ace/theme/textmate
and
xcode, vibrant_ink, solarized_dark, solarized_light, tomorrow, tomorrow_night, tomorrow_night_blue, twilight, tomorrow_night_eighties, pastel_on_dark
and some more....

@jayzeng

This comment has been minimized.

Copy link

commented Jan 30, 2013

very cool!

@Galilyou

This comment has been minimized.

Copy link

commented Jan 30, 2013

Awesome! :)

@zhaoxingyun

This comment has been minimized.

Copy link

commented Jan 30, 2013

Nice!

@cuthead

This comment has been minimized.

Copy link

commented Jan 30, 2013

Working on Chrome 24. Great works.

@minikomi

This comment has been minimized.

Copy link

commented Jan 30, 2013

Adding openkeyval for storage :)

https://gist.github.com/4672169

@NaixSpirit

This comment has been minimized.

Copy link

commented Jan 30, 2013

cool!

@raecoo

This comment has been minimized.

Copy link

commented Jan 30, 2013

Good job, works well on Chrome 24.x.x. Thanks

@kafkaliu

This comment has been minimized.

Copy link

commented Jan 30, 2013

terrific!!

@icepole-jon

This comment has been minimized.

Copy link

commented Jan 30, 2013

a little change,open in the new tab and with 18px fontsize
javascript:(function(){window.open('data:text/html, <style type="text/css">#e{position:absolute;top:0;right:0;bottom:0;left:0;font-size:18px;}</style>

<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/c_cpp");</script>','_blank');})()

@shouya

This comment has been minimized.

Copy link

commented Jan 30, 2013

Awesome is it!

@gongscut

This comment has been minimized.

Copy link

commented Jan 30, 2013

how about COBOL ?

@cballenar

This comment has been minimized.

Copy link

commented Jan 30, 2013

Nice...

@assassindesign

This comment has been minimized.

Copy link

commented Jan 30, 2013

光打字多无聊来个画图的玩玩:)

data:text/html, <body><canvas id="dyDraw">你的浏览器不支持HTML5 Canvas</canvas></body><script>function $(id){return document.getElementById(id);} $('dyDraw').width=document.body.clientWidth;$('dyDraw').height=document.body.clientHeight;if(window.addEventListener){window.addEventListener('load',function(){var canvas,canvastext;var hua=false;function dyDrawing(){canvas=$('dyDraw');canvastext=canvas.getContext('2d');canvas.addEventListener('mousedown',canvasMouse,false);canvas.addEventListener('mousemove',canvasMouse,false);window.addEventListener('mouseup',canvasMouse,false);} function canvasMouse(dy){var x,y;if(dy.layerX||dy.layerX==0){x=dy.layerX;y=dy.layerY;}else if(dy.offsetX||dy.offsetX==0){x=dy.offsetX;y=dy.offsetY;} x-=dyDraw.offsetLeft;y-=dyDraw.offsetTop;if(dy.type=='mousedown'){hua=false;canvastext.beginPath();canvastext.moveTo(x,y);hua=true;}else if(dy.type=='mousemove'){if(hua){canvastext.strokeStyle="rgb(255,0,0)";canvastext.lineWidth=9;canvastext.lineTo(x,y);canvastext.stroke();}}else if(dy.type=='mouseup'){hua=false;}} dyDrawing();},false);}</script>
@itomatik

This comment has been minimized.

Copy link

commented Jan 31, 2013

very cool

@ajduke

This comment has been minimized.

Copy link

commented Jan 31, 2013

Cool stuff !!

@maximx

This comment has been minimized.

Copy link

commented Feb 1, 2013

pretty nice!

@laihui0207

This comment has been minimized.

Copy link

commented Feb 1, 2013

very cool !

@hit9

This comment has been minimized.

Copy link

commented Feb 12, 2013

nice!

@lvwzhen

This comment has been minimized.

Copy link

commented Feb 20, 2013

cool!

@tylerlong

This comment has been minimized.

Copy link

commented Mar 9, 2013

Now we have Slim Text

Slim Text

@tsi

This comment has been minimized.

Copy link

commented May 22, 2013

This is kinda similar to Acelet, only without the import-highlighted-text thingy that acelet does ;)

@shmuelix

This comment has been minimized.

Copy link

commented Jul 8, 2013

I am wondering who will take this as a challenge to create from this bookmarklet a cross-browser extension.
It can easily be done with the Crossrider extension development framework (http://crossrider.com).

There is also a tutorial about this on the Crossrider blog:
http://blog.crossrider.com/post/52302194099/from-bookmarklet-to-extension-in-just-5-minutes

@FrankFan

This comment has been minimized.

Copy link

commented Oct 24, 2013

wow~ awesome~

@Yhzhtk

This comment has been minimized.

Copy link

commented Jan 2, 2014

good!

@rafaelcgo

This comment has been minimized.

Copy link

commented Jan 10, 2014

man, this is sick! Amazing

@PeterRao

This comment has been minimized.

Copy link

commented Mar 18, 2014

so cool

@PeterRao

This comment has been minimized.

Copy link

commented Mar 18, 2014

so cool

@jesuscast

This comment has been minimized.

Copy link

commented Jun 15, 2014

You're Amazing dude

@dlio

This comment has been minimized.

Copy link

commented Jun 22, 2014

Is it possible to set this as the new tab page default in chrome?
I've tried a few workarounds to no avail.
Awesome project -- thanks for sharing.

@juanpastas

This comment has been minimized.

Copy link

commented Feb 10, 2015

It saves the file with weird characters, I am in Chrome.

@whzecomjm

This comment has been minimized.

Copy link

commented Apr 20, 2015

👍Amazing! Works on Chrome 42.

@gopalindians

This comment has been minimized.

Copy link

commented Jul 10, 2015

Great!

@NicholasGraf

This comment has been minimized.

Copy link

commented Mar 24, 2017

Try this: http://listpl.us

@ryanlid

This comment has been minimized.

Copy link

commented Apr 27, 2017

👍 Cool~

@reatang

This comment has been minimized.

Copy link

commented May 13, 2017

http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js is 404

http://ajaxorg.github.io/ace-builds/src-noconflict/ace.js it work

data:text/html, <style type="text/css">#e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="e"></div><script src="http://ajaxorg.github.io/ace-builds/src-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/ruby");</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.