-
-
Save jdkanani/4670615 to your computer and use it in GitHub Desktop.
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 :) --> |
Thanks.
Nice bookmark
incredibly cool
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 ?
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.
Now it would be a nice idea to compile the code. Any suggestions?
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>
NICE!
@jdkanani @tylerlong Thank you very much~
cool, could the tab size be 2?
Use e.getSession().setTabSize(2);
in script block.
Now we have Slim Text
Awesome work :)
How could I save that to local storage or downloadable file?
Thx, Incredibly cool!
wonderful
It`s really cool idea!
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?
you can use this url of ace.js and it works:
https://cdn.jsdelivr.net/npm/[email protected]/src-min-noconflict/ace.js
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.
i don't understand how to use this could i have a step by step procedure
same
unless u put it in the same directory
the cloudfront url dose not work anymore
This doesn't work for me. Any help?
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.
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>
is there a way to run the code
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.