While I was working on my latest side project, I though of using ace editor for syntax highlighting and code styling. But, configuring editor was bit confusing for me. There was a bunch of CDN links of ace editor available on the site, But didn’t have much information about which one I should use. I tried some of them but didn’t worked for me. At last after some googling, I got the below solution.
I started with defining a div for the editor.
Now I need to add the ace editor script, the script worked for me is the one given below.
<script src= '//d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js'></script>
At last need to configure the editor, as you needed
var editor = ace.edit("editor"); editor.getSession().setMode("ace/mode/json"); editor.setTheme("ace/theme/twilight"); editor.getSession().setTabSize(4); editor.getSession().setUseWrapMode(true);
You can configure the editor as you need, I set the mode as json for my application. You set it as ruby, php, etc.. as you need.