Skip to content

Instantly share code, notes, and snippets.

@jdkanani
Forked from jakeonrails/Ruby Notepad Bookmarklet
Last active June 16, 2024 13:44
Show Gist options
  • Save jdkanani/4670615 to your computer and use it in GitHub Desktop.
Save jdkanani/4670615 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 class="e" id="editor"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/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>
<!--
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
GitHub -> ace/theme/github
TextMate -> ace/theme/textmate
and
ambiance, dawn, chaos, chrome, dreamweaver, xcode, vibrant_ink, solarized_dark, solarized_light, tomorrow, tomorrow_night, tomorrow_night_blue,
twilight, tomorrow_night_eighties, pastel_on_dark and many more..
-->
<!-- If you want a markdown converter use this : !-->
data:text/html,<style type="text/css">.e{position:absolute;top:0;right:50%;bottom:0;left:0;} .c{position:absolute;overflow:auto;top:0;right:0;bottom:0;left:50%;}</style><div class="e" id="editor"></div><div class="c"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script><script> function showResult(e){consoleEl.innerHTML=e}var e=ace.edit("editor");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/markdown");var consoleEl=document.getElementsByClassName("c")[0];var converter=new Showdown.converter;e.commands.addCommand({name:"markdown",bindKey:{win:"Ctrl-M",mac:"Command-M"},exec:function(t){var n=e.getSession().getMode().$id;if(n=="ace/mode/markdown"){showResult(converter.makeHtml(t.getValue()))}},readOnly:true})</script>
<!-- Press Ctrl+M or Command+M to convert your markdown code to html :) -->
@jdkanani
Copy link
Author

If you really want it for personal machine, just set-up local instance of ace. I assure you that - it would not take more than a min.

@rabovik
Copy link

rabovik commented Jan 30, 2013

Thanks.

@beautyfree
Copy link

Nice bookmark

@artzub
Copy link

artzub commented Jan 30, 2013

incredibly cool

@revskill10
Copy link

Thank you for nice bookmark. I have a problem when save then reopen the html file. There are some strange characters appeared. Can you fix it ?

@jdkanani
Copy link
Author

Actually, ace works on modules of different mode using AMD, that might be the cause of problem while reopening it. It will take time to take a dive in.

@ariedov
Copy link

ariedov commented Jan 31, 2013

Now it would be a nice idea to compile the code. Any suggestions?

@jdkanani
Copy link
Author

Here is a code to compile markdown, Press Ctrl+M or Command+M to convert markdown code to html :)

data:text/html,<style type="text/css">.e{position:absolute;top:0;right:50%;bottom:0;left:0;} .c{position:absolute;overflow:auto;top:0;right:0;bottom:0;left:50%;}</style><div class="e" id="editor"></div><div class="c"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script><script> function showResult(e){consoleEl.innerHTML=e}var e=ace.edit("editor");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/markdown");var consoleEl=document.getElementsByClassName("c")[0];var converter=new Showdown.converter;e.commands.addCommand({name:"markdown",bindKey:{win:"Ctrl-M",mac:"Command-M"},exec:function(t){var n=e.getSession().getMode().$id;if(n=="ace/mode/markdown"){showResult(converter.makeHtml(t.getValue()))}},readOnly:true})</script>

@Yangksheng
Copy link

NICE!

@tommykakashi
Copy link

@jdkanani @tylerlong Thank you very much~

@JuanitoFatas
Copy link

cool, could the tab size be 2?

@jdkanani
Copy link
Author

Use e.getSession().setTabSize(2); in script block.

@tylerlong
Copy link

Now we have Slim Text

Slim Text

@tylerlong
Copy link

@jdkanani Slim Text supports Ctrl-M preview markdown. Inspired by your comment. Thank you.

@AhmedNadar
Copy link

Awesome work :)
How could I save that to local storage or downloadable file?

@whzecomjm
Copy link

Thx, Incredibly cool!

@chendeshen
Copy link

wonderful

@Grapekun
Copy link

It`s really cool idea!

@g8d3
Copy link

g8d3 commented Aug 25, 2018

I could not get this to work, I added the bookmark and pasted all text, I get a long URL in the address bar and data:text/html on document body.

How should I install this?

@javiersalinas00
Copy link

@h1z1
Copy link

h1z1 commented Oct 3, 2018

Curious mostly because this was one of the first few search hits... How is it a bookmarklet you're referencing a third party script that is not in any git repo. Not that you would, but there's not to stop someone from changing that to do something else.

@LuffyRequiem
Copy link

i don't understand how to use this could i have a step by step procedure

@nitani-x
Copy link

nitani-x commented Oct 9, 2020

same

@nitani-x
Copy link

nitani-x commented Oct 9, 2020

unless u put it in the same directory

@inyourface34456
Copy link

the cloudfront url dose not work anymore

@EpicUser900
Copy link

This doesn't work for me. Any help?

@inyourface34456
Copy link

inyourface34456 commented May 27, 2021

idk how to fix. I got a blank screen as well.

UPDATE:
@EpicUser900
the http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js dose not exsist anymore. It gives site not found.

@DeeprajPandey
Copy link

As someone else mentioned in a previous comment, ace.js has moved. Refer to this CDN directory to get the latest Ace version whenever you are using this.

Right now, the latest version is Ace v1.4.12 (the directory listing also mentions that there are no known vulnerabilities as of now but use this at your own risk) and the link is: https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js.

Replace the src attribute in the script tag with the link you copied in the previous step. The code snippets would now become:

Simple editor

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>

Markdown Editor

This uses showdown.js for converting markdown to html. This is the CDN directory link for showdown. Here's the current CDN link for Showdown v1.9.1: https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js.

I have replaced both ace and showdown CDN links in the src attributes for this editable snippet.
As mentioned in the original gist, Ctrl+M or Cmd+M converts the markdown to html on the side panel.

data:text/html,<style type="text/css">.e{position:absolute;top:0;right:50%;bottom:0;left:0;} .c{position:absolute;overflow:auto;top:0;right:0;bottom:0;left:50%;}</style><div class="e" id="editor"></div><div class="c"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js" type="text/javascript" charset="utf-8"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"></script><script> function showResult(e){consoleEl.innerHTML=e}var e=ace.edit("editor");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/markdown");var consoleEl=document.getElementsByClassName("c")[0];var converter=new Showdown.converter;e.commands.addCommand({name:"markdown",bindKey:{win:"Ctrl-M",mac:"Command-M"},exec:function(t){var n=e.getSession().getMode().$id;if(n=="ace/mode/markdown"){showResult(converter.makeHtml(t.getValue()))}},readOnly:true})</script>

@inyourface34456
Copy link

is there a way to run the code

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment