Simple HTML Pretty Print

Question

http://jsfiddle.net/JamesKyle/L4b8b/

This may be a futile effort, but I personally think its possible.

I\'m not the best at Java

Answer 1

If you're doing this client-side, and you already have the DOM, then it would be more efficient to serialise it yourself inserting the appropriate tags as you go rather than serialising the whole subtree at once and then trying to reparse it.

Answer 2

Don't be so sure you have gotten all there is to pretty-printing HTML in so few lines. It took me a little more than a year and 2000 lines to really nail this topic. You can just use my code directly or refactor it to fit your needs:

https://github.com/prettydiff/prettydiff/blob/master/lib/markuppretty.js (and Github project)

You can demo it at http://prettydiff.com/?m=beautify&html

The reason why it takes so much code is that people really don't seem to understand or value the importance of text nodes. If you are adding new and empty text nodes during beautification then you are doing it wrong and are likely corrupting your content. Additionally, it is also really ease to screw it up the other way and remove white space from inside your content. You have to be careful about these or you will completely destroy the integrity of your document.

Also, what if your document contains CSS or JavaScript. Those should be pretty printed as well, but have very different requirements from HTML. Even HTML and XML have different requirements. Please take my word for it that this is not a simple thing to figure out. HTML Tidy has been at this for more than a decade and still screws up a lot of edge cases.

As far as I know my markup_beauty.js application is the most complete pretty-printer ever written for HTML/XML. I know that is a very bold statement, and perhaps arrogant, but so far its never been challenged. Look my code and if there is something you need that it is not doing please let me know and I will get around to adding it in.

Answer 3

Personally I would wrap HTML with pre and not try to do any pretty printing. There are TONS of libraries for doing code formatting just google pretty print. Just wrapping HTML with pre will automatically make it 'printed' code.

For JavaScript, you can use JSON.stringify to recreate the code by passing in a number of spaces for nested structures.

JSON.stringify({ name: 'value' }, null, 2); //Change to four, for four spaces