Create a gist now

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 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 :) -->
@cristaloleg

This comment has been minimized.

Show comment
Hide comment

awesome!

@rabovik

This comment has been minimized.

Show comment
Hide comment
@rabovik

rabovik Jan 30, 2013

Objective-C is not highlighted at all. I tried ace/mode/objectivec. Any suggestions?

rabovik commented Jan 30, 2013

Objective-C is not highlighted at all. I tried ace/mode/objectivec. Any suggestions?

@jdkanani

This comment has been minimized.

Show comment
Hide comment
@jdkanani

jdkanani Jan 30, 2013

ace/mode/objectivec is the right mode. But, Facing access problem using cloudfront- getting 403 forbidden for objectivec js file.

Owner

jdkanani commented Jan 30, 2013

ace/mode/objectivec is the right mode. But, Facing access problem using cloudfront- getting 403 forbidden for objectivec js file.

@jdkanani

This comment has been minimized.

Show comment
Hide comment
@jdkanani

jdkanani Jan 30, 2013

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.

Owner

jdkanani commented Jan 30, 2013

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

This comment has been minimized.

Show comment
Hide comment

rabovik commented Jan 30, 2013

Thanks.

@beautyfree

This comment has been minimized.

Show comment
Hide comment
@beautyfree

beautyfree Jan 30, 2013

Nice bookmark

Nice bookmark

@artzub

This comment has been minimized.

Show comment
Hide comment
@artzub

artzub Jan 30, 2013

incredibly cool

artzub commented Jan 30, 2013

incredibly cool

@revskill10

This comment has been minimized.

Show comment
Hide comment
@revskill10

revskill10 Jan 31, 2013

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 ?

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

This comment has been minimized.

Show comment
Hide comment
@jdkanani

jdkanani Jan 31, 2013

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.

Owner

jdkanani commented Jan 31, 2013

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

This comment has been minimized.

Show comment
Hide comment
@ariedov

ariedov Jan 31, 2013

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

ariedov commented Jan 31, 2013

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

@jdkanani

This comment has been minimized.

Show comment
Hide comment
@jdkanani

jdkanani Jan 31, 2013

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

jdkanani commented Jan 31, 2013

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

This comment has been minimized.

Show comment
Hide comment

NICE!

@tommykakashi

This comment has been minimized.

Show comment
Hide comment

@jdkanani @tylerlong Thank you very much~

@JuanitoFatas

This comment has been minimized.

Show comment
Hide comment
@JuanitoFatas

JuanitoFatas Feb 14, 2013

cool, could the tab size be 2?

cool, could the tab size be 2?

@jdkanani

This comment has been minimized.

Show comment
Hide comment
@jdkanani

jdkanani Feb 18, 2013

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

Owner

jdkanani commented Feb 18, 2013

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

@tylerlong

This comment has been minimized.

Show comment
Hide comment

Now we have Slim Text

Slim Text

@tylerlong

This comment has been minimized.

Show comment
Hide comment
@tylerlong

tylerlong May 19, 2013

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

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

@AhmedNadar

This comment has been minimized.

Show comment
Hide comment
@AhmedNadar

AhmedNadar Dec 18, 2014

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

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

@whzecomjm

This comment has been minimized.

Show comment
Hide comment
@whzecomjm

whzecomjm Apr 20, 2015

Thx, Incredibly cool!

Thx, Incredibly cool!

@chendeshen

This comment has been minimized.

Show comment
Hide comment

wonderful

@Grapekun

This comment has been minimized.

Show comment
Hide comment
@Grapekun

Grapekun Jun 22, 2016

It`s really cool idea!

It`s really cool idea!

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