Skip to content

Instantly share code, notes, and snippets.

@jakeonrails
Created January 29, 2013 18:08
Star You must be signed in to star a gist
Save jakeonrails/4666256 to your computer and use it in GitHub Desktop.
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>
@kafkaliu
Copy link

terrific!!

@icepole-jon
Copy link

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
Copy link

shouya commented Jan 30, 2013

Awesome is it!

@gongscut
Copy link

how about COBOL ?

@cballenar
Copy link

Nice...

@assassindesign
Copy link

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

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
Copy link

very cool

@ajduke
Copy link

ajduke commented Jan 31, 2013

Cool stuff !!

@maximx
Copy link

maximx commented Feb 1, 2013

pretty nice!

@laihui0207
Copy link

very cool !

@hit9
Copy link

hit9 commented Feb 12, 2013

nice!

@lvwzhen
Copy link

lvwzhen commented Feb 20, 2013

cool!

@tylerlong
Copy link

Now we have Slim Text

Slim Text

@tsi
Copy link

tsi commented May 22, 2013

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

@shmuelix
Copy link

shmuelix 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
Copy link

wow~ awesome~

@Yhzhtk
Copy link

Yhzhtk commented Jan 2, 2014

good!

@rafaelcgo
Copy link

man, this is sick! Amazing

@PeterRao
Copy link

so cool

@PeterRao
Copy link

so cool

@jesuscast
Copy link

You're Amazing dude

@dlio
Copy link

dlio 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.

@g8d3
Copy link

g8d3 commented Feb 10, 2015

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

@whzecomjm
Copy link

👍Amazing! Works on Chrome 42.

@gopalindians
Copy link

Great!

@NicholasGraf
Copy link

NicholasGraf commented Mar 24, 2017

Try this: http://listpl.us

@ryanlid
Copy link

ryanlid commented Apr 27, 2017

👍 Cool~

@reatang
Copy link

reatang 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>

@nobody5050
Copy link

does not work on mobile safari, typing doesn’t show up

@DeeprajPandey
Copy link

ace.js has moved. Check the CDN Library Page to get the cdn link for the latest Ace version whenever you are using this.

Here's the CDN link to ace 1.4.12: https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js.
Code snippet with the updated link:

data:text/html, <style type="text/css">.e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div class="e" id="editor"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("editor");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