Skip to content

Instantly share code, notes, and snippets.

@jakeonrails

jakeonrails/Ruby Notepad Bookmarklet

Created Jan 29, 2013
Star
Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
This bookmarklet gives you a code editor in your browser with a single click.
Raw
Ruby Notepad Bookmarklet
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.

Sign in to view
Copy link

@theunraveler theunraveler commented Jan 29, 2013

Doesn't work on Firefox 18, fwiw.
@tekknolagi

This comment has been minimized.

Sign in to view
Copy link

@tekknolagi tekknolagi commented Jan 29, 2013

Confirmed, doesn't work on Firefox.
@randito

This comment has been minimized.

Sign in to view
Copy link

@randito randito commented Jan 29, 2013

Confirmed: Still pretty cool, though.
@backwardm

This comment has been minimized.

Sign in to view
Copy link

@backwardm backwardm commented Jan 29, 2013

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

This comment has been minimized.

Sign in to view
Copy link

@pato pato commented Jan 29, 2013

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

This comment has been minimized.

Sign in to view
Copy link

@bhurlow bhurlow commented Jan 29, 2013

way cool
@nixpulvis

This comment has been minimized.

Sign in to view
Copy link

@nixpulvis nixpulvis 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.

Sign in to view
Copy link

@hayden-jones hayden-jones commented Jan 29, 2013

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

This comment has been minimized.

Sign in to view
Copy link

@pdillon3 pdillon3 commented Jan 29, 2013

What is Firefox?
@Apocryphon

This comment has been minimized.

Sign in to view
Copy link

@Apocryphon Apocryphon commented Jan 29, 2013

Wha?
@sergiotapia

This comment has been minimized.

Sign in to view
Copy link

@sergiotapia sergiotapia commented Jan 29, 2013

Woah! This is fantastic!
@antoniorosado

This comment has been minimized.

Sign in to view
Copy link

@antoniorosado antoniorosado commented Jan 30, 2013

:)
@lashkari

This comment has been minimized.

Sign in to view
Copy link

@lashkari lashkari 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.

Sign in to view
Copy link

@markbrown4 markbrown4 commented Jan 30, 2013

Firefox is the greatest browser of all time Losers!
@mufid

This comment has been minimized.

Sign in to view
Copy link

@mufid mufid commented Jan 30, 2013

Working on Chrome 25. Great! Love it!
@cswuyg

This comment has been minimized.

Sign in to view
Copy link

@cswuyg cswuyg commented Jan 30, 2013

So good, thanks.
@slawdan

This comment has been minimized.

Sign in to view
Copy link

@slawdan slawdan 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.

Sign in to view
Copy link

@justdark justdark commented Jan 30, 2013

cool!
@jdkanani

This comment has been minimized.

Sign in to view
Copy link

@jdkanani jdkanani 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.

Sign in to view
Copy link

@jayzeng jayzeng commented Jan 30, 2013

very cool!
@Galilyou

This comment has been minimized.

Sign in to view
Copy link

@Galilyou Galilyou commented Jan 30, 2013

Awesome! :)
@zhaoxingyun

This comment has been minimized.

Sign in to view
Copy link

@zhaoxingyun zhaoxingyun commented Jan 30, 2013

Nice!
@ghost

This comment has been minimized.

Sign in to view
Copy link

@ghost ghost commented Jan 30, 2013

Working on Chrome 24. Great works.
@minikomi

This comment has been minimized.

Sign in to view
Copy link

@minikomi minikomi commented Jan 30, 2013

Adding openkeyval for storage :)

https://gist.github.com/4672169
@xuanyu-h

This comment has been minimized.

Sign in to view
Copy link

@xuanyu-h xuanyu-h commented Jan 30, 2013

cool!
@raecoo

This comment has been minimized.

Sign in to view
Copy link

@raecoo raecoo commented Jan 30, 2013

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

This comment has been minimized.

Sign in to view
Copy link

@kafkaliu kafkaliu commented Jan 30, 2013

terrific!!
@icepole-jon

This comment has been minimized.

Sign in to view
Copy link

@icepole-jon 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

This comment has been minimized.

Sign in to view
Copy link

@shouya shouya commented Jan 30, 2013

Awesome is it!
@gongscut

This comment has been minimized.

Sign in to view
Copy link

@gongscut gongscut commented Jan 30, 2013

how about COBOL ?
@cballenar

This comment has been minimized.

Sign in to view
Copy link

@cballenar cballenar commented Jan 30, 2013

Nice...
@assassindesign

This comment has been minimized.

Sign in to view
Copy link

@assassindesign 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

This comment has been minimized.

Sign in to view
Copy link

@itomatik itomatik commented Jan 31, 2013

very cool
@ajduke

This comment has been minimized.

Sign in to view
Copy link

@ajduke ajduke commented Jan 31, 2013

Cool stuff !!
@maximx

This comment has been minimized.

Sign in to view
Copy link

@maximx maximx commented Feb 1, 2013

pretty nice!
@laihui0207

This comment has been minimized.

Sign in to view
Copy link

@laihui0207 laihui0207 commented Feb 1, 2013

very cool !
@hit9

This comment has been minimized.

Sign in to view
Copy link

@hit9 hit9 commented Feb 12, 2013

nice!
@lvwzhen

This comment has been minimized.

Sign in to view
Copy link

@lvwzhen lvwzhen commented Feb 20, 2013

cool!
@tylerlong

This comment has been minimized.

Sign in to view
Copy link

@tylerlong tylerlong commented Mar 9, 2013

Now we have Slim Text

Slim Text
@tsi

This comment has been minimized.

Sign in to view
Copy link

@tsi tsi 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.

Sign in to view
Copy link

@shmuelix 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

This comment has been minimized.

Sign in to view
Copy link

@FrankFan FrankFan commented Oct 24, 2013

wow~ awesome~
@Yhzhtk

This comment has been minimized.

Sign in to view
Copy link

@Yhzhtk Yhzhtk commented Jan 2, 2014

good!
@rafaelcgo

This comment has been minimized.

Sign in to view
Copy link

@rafaelcgo rafaelcgo commented Jan 10, 2014

man, this is sick! Amazing
@PeterRao

This comment has been minimized.

Sign in to view
Copy link

@PeterRao PeterRao commented Mar 18, 2014

so cool
@PeterRao

This comment has been minimized.

Sign in to view
Copy link

@PeterRao PeterRao commented Mar 18, 2014

so cool
@jesuscast

This comment has been minimized.

Sign in to view
Copy link

@jesuscast jesuscast commented Jun 15, 2014

You're Amazing dude
@dlio

This comment has been minimized.

Sign in to view
Copy link

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

This comment has been minimized.

Sign in to view
Copy link

@g8d3 g8d3 commented Feb 10, 2015

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

This comment has been minimized.

Sign in to view
Copy link

@whzecomjm whzecomjm commented Apr 20, 2015

👍Amazing! Works on Chrome 42.
@gopalindians

This comment has been minimized.

Sign in to view
Copy link

@gopalindians gopalindians commented Jul 10, 2015

Great!
@NicholasGraf

This comment has been minimized.

Sign in to view
Copy link

@NicholasGraf NicholasGraf commented Mar 24, 2017 •
edited

Try this: http://listpl.us
@ryanlid

This comment has been minimized.

Sign in to view
Copy link

@ryanlid ryanlid commented Apr 27, 2017

👍 Cool~
@reatang

This comment has been minimized.

Sign in to view
Copy link

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

This comment has been minimized.

Sign in to view
Copy link

@nobody5050 nobody5050 commented Oct 27, 2019

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

This comment has been minimized.

Sign in to view
Copy link

@DeeprajPandey 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