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!
JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.
Security insights from Cside