I'm using Codemirror for my app.
I noticed if I select all the text and press SHIFT+Tab it will auto align my code making it easier to read.
Here's an example of what my app currently renders...
<ul>
<li>
<font color="#f90000">
Apples
</font>
</li>
<li>
<font color="#ff9a3d">
Oranges
</font>
</li>
</ul>
Here's what I'm trying to get it to render.
<ul>
<li>
<font color="#f90000">
Apples
</font>
</li>
<li>
<font color="#ff9a3d">
Oranges
</font>
</li>
</ul>
EDIT:
Does anyone know if there's a way to do this without selecting the whole code manually in Codemirror?
Why? I have Codemirror running in my background of my app all code that's added is added dynamically, but when I save the final code it looks like above.
Any help is greatly appreciated.
By using
codemirror
formatting add-on you can achieve your requirementJSFiddle Demo
Source Link
http://codemirror.net/2/demo/formatting.html
You can use the following code to achieve what you want :
Bind this function with your events, and it will auto-format the code.
autoFormatRange
was removed from codemirror, so we should use another way, register our own extension:1. generate js
Go to js generator (just an easy way to get minified js with plugins and custom extensions).
http://codemirror.net/doc/compress.htmlUpdated link for version 3: http://codemirror.net/3/doc/compress.html
2. Select options desired
Paste custom extension code and press "Compress" button.
3. Use generated .js as follows
Html:
Code was found here
Ever since Codemirror has removed support for
autoFormatRange()
it's not worth the trouble to use it for formatting text. I usejs-beautify
instead.Here is the original addon including a small update to let it work with CodeMirror V3 :