Skip to content

Instantly share code, notes, and snippets.

@jakeonrails
Created January 29, 2013 18:08
Show Gist options
  • Select an option

  • Save jakeonrails/4666256 to your computer and use it in GitHub Desktop.

Select an option

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

terrific!!

@icepole-jon
Copy link
Copy Markdown

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

shouya commented Jan 30, 2013

Awesome is it!

@gongscut
Copy link
Copy Markdown

how about COBOL ?

@cballenar
Copy link
Copy Markdown

Nice...

@assassindesign
Copy link
Copy Markdown

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

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

very cool

@ajduke
Copy link
Copy Markdown

ajduke commented Jan 31, 2013

Cool stuff !!

@maximx
Copy link
Copy Markdown

maximx commented Feb 1, 2013

pretty nice!

@laihui0207
Copy link
Copy Markdown

very cool !

@hit9
Copy link
Copy Markdown

hit9 commented Feb 12, 2013

nice!

@lvwzhen
Copy link
Copy Markdown

lvwzhen commented Feb 20, 2013

cool!

@tylerlong
Copy link
Copy Markdown

Now we have Slim Text

Slim Text

@tsi
Copy link
Copy Markdown

tsi commented May 22, 2013

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

@shmuelix
Copy link
Copy Markdown

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

wow~ awesome~

@Yhzhtk
Copy link
Copy Markdown

Yhzhtk commented Jan 2, 2014

good!

@rafaelcgo
Copy link
Copy Markdown

man, this is sick! Amazing

@PeterRao
Copy link
Copy Markdown

so cool

@PeterRao
Copy link
Copy Markdown

so cool

@jesuscast
Copy link
Copy Markdown

You're Amazing dude

@dlio
Copy link
Copy Markdown

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

g8d3 commented Feb 10, 2015

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

@whzecomjm
Copy link
Copy Markdown

👍Amazing! Works on Chrome 42.

@gopalindians
Copy link
Copy Markdown

Great!

@nmartinmauser
Copy link
Copy Markdown

nmartinmauser commented Mar 24, 2017

Try this: http://listpl.us

@ryanlid
Copy link
Copy Markdown

ryanlid commented Apr 27, 2017

👍 Cool~

@reatang
Copy link
Copy Markdown

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

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

@DeeprajPandey
Copy link
Copy Markdown

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