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:

Ugly Code

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.

  1. 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.
  2. 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:
Prettier code