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

kafkaliu commented Jan 30, 2013

terrific!!

@icepole-jon
Copy link

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

shouya commented Jan 30, 2013

Awesome is it!

@gongscut
Copy link

gongscut commented Jan 30, 2013

how about COBOL ?

@cballenar
Copy link

cballenar commented Jan 30, 2013

Nice...

@assassindesign
Copy link

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

itomatik commented Jan 31, 2013

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

laihui0207 commented Feb 1, 2013

very cool !

@hit9
Copy link

hit9 commented Feb 12, 2013

nice!

@lvwzhen
Copy link

lvwzhen commented Feb 20, 2013

cool!

@tylerlong
Copy link

tylerlong commented Mar 9, 2013

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

FrankFan commented Oct 24, 2013

wow~ awesome~

@Yhzhtk
Copy link

Yhzhtk commented Jan 2, 2014

good!

@rafaelcgo
Copy link

rafaelcgo commented Jan 10, 2014

man, this is sick! Amazing

@PeterRao
Copy link

PeterRao commented Mar 18, 2014

so cool

@PeterRao
Copy link

PeterRao commented Mar 18, 2014

so cool

@jesuscast
Copy link

jesuscast commented Jun 15, 2014

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

whzecomjm commented Apr 20, 2015

👍Amazing! Works on Chrome 42.

@gopalindians
Copy link

gopalindians commented Jul 10, 2015

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

nobody5050 commented Oct 27, 2019

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

@DeeprajPandey
Copy link

DeeprajPandey commented Jul 23, 2021

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