How To Make Your Code Pretty/More Readable
Sometimes you need to work in the Source view of the editor (by clicking the “Source” button in the upper-left-hand corner of the CKEditor) in order to fiddle with HTML directly (eg, when editing slideshows). However, when you click the Source button, you might see something like this:
If you know HTML, this code is readable, but it could be a lot easier to read if it were color-coded and balanced. Here’s how to make that happen.
- If you have Dreamweaver, Visual Studio, or about any other HTML editor, this is very simple. You just paste the code into a new blank document. Then, in Dreamweaver, you’d select Commands –> Apply Source Formatting. In Visual Studio, you would go to Edit –> Format Document, or press Ctrl + K and then Ctrl + D. You can get Visual Studio (Express) for free at http://www.asp.net/vwd.
- If you don’t have software, you can also use http://www.dirtymarkup.com/ to clean/balance your HTML so it’s more readable.
Here’s what the above looks like after I formatted it in Visual Studio: