Javascript text editor right in your browser in one line of code
Paste the line of code below to your browser's address field. It just works !
data:text/html, <style type="text/css">#js-editor{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="js-editor"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var jsEditor=ace.edit("js-editor");jsEditor.setTheme("ace/theme/monokai");jsEditor.getSession().setMode("ace/mode/javascript");</script>Browser compatibility:
Chrome + Chrome Dev + Chrome Canary: works
Safari: works
Firefox: doesn't work
IE: who cares
Written by Dung Quang
Related protips
12 Responses
This is super awesome.
Note that you can change the syntax highlighting and code completion by changing ace/mode/javascript to ace/mode/html or ace/mode/ruby, etc.
And a guide on how to customize it further: http://ace.c9.io/#nav=howto
@anthropomorphic: thanks for your comment. Actually I thought about writing a script that prompt user to write the language they want to be highlighted. But it ruins the whole point of something that just works and discovery of the script :P
I agree entirely. However it is good to know how versatile it can be. I coppied it, reduced the indent to two, set language to ruby, removed the page guide and made a gist. Now I have a ruby editor at a moments notice. Super useful in my opinion. And apparently you can include preset text, disable editing and embed it in a page. Fast, easy sharing of code snippets with syntax highlighting and line numbers.
I'm glad that you like it :D
Is there any way to have the JavaScript code evaluated? Would be a great minimalistic alternative to JSFiddle.
@rwilhelm: very nice idea actually :D
Great tip Dung. I am guessing that it is possible to modify the syntax highlighting so that it works with other languages by modifying the setting in this line?
jsEditor.getSession().setMode("ace/mode/javascript")
Gr8 work...
super awesome
@chrissimpkins: yes, you can :)
Have a fresh tip? Share with Coderwall community!
