javascript - Simple HTML Pretty Print -

http://jsfiddle.net/jameskyle/l4b8b/

this may futile effort, think possible.

i'm not best @ javascript or jquery, think have found simple way of making simple prettyprint html.

there 4 types of code in prettyprint:

1. plain text
2. elements
3. attributes
4. values

in order stylize want wrap elements, attibutes , values spans own classes.

---

the first way have of doing store every single kind of element , attribute (shown below) , wrapping them corresponding spans

$(document).ready(function() {      $('pre.prettyprint.html').each(function() {          $(this).css('white-space','pre-line');          var code = $(this).html();          var html-element = $(code).find('a, abbr, acronym, address, area, article, aside, audio, b, base, bdo, bdi, big, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, command, datalist, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, img, input, ins, kbd, keygen, label, legend, li, link, map, mark, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, pre, progress, q, rp, rt, ruby, samp, script, section, select, small, source, span, strong, summary, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, time, tr, track, tt, ul, var, video, wbr');          var html-attribute = $(code).find('abbr, accept-charset, accept, accesskey, actionm, align, alink, alt, archive, axis, background, bgcolor, border, cellpadding, cellspacing, char, charoff, charset, checked, cite, class, classid, clear, code, codebase, codetype, color, cols, colspan, compact, content, coords, data, datetime, declare, defer, dir, disabled, enctype, face, for, frame, frameborder, headers, height, href, hreflang, hspace, http-equiv, id, ismap, label, lang, language, link, longdesc, marginheight, marginwidth, maxlength, media, method, multiple, name, nohref, noresize, noshade, nowrap, object, onblur, onchange,onclick ondblclick onfocus onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload, profile, prompt, readonly, rel, rev, rows, rowspan, rules, scheme, scope, scrolling, selected, shape, size, span, src, standby, start, style, summary, tabindex, target, text, title, type, usemap, valign, value, valuetype, version, vlink, vspace, width');          var html-value = $(code).find(/* instance of text inbetween 2 parenthesis */);          $(element).wrap('<span class="element" />');         $(attribute).wrap('<span class="attribute" />');         $(value).wrap('<span class="value" />');          $(code).find('<').replacewith('&lt');         $(code).find('>').replacewith('&gt');     }); }); 

---

the second way thought of detect elements amount of text surrounded 2 < >'s, detect attributes text inside of element either surrounded 2 spaces or has = after it.

$(document).ready(function() {      $('pre.prettyprint.html').each(function() {          $(this).css('white-space','pre-line');          var code = $(this).html();          var html-element = $(code).find(/* instance of text inbeween 2 < > */);          var html-attribute = $(code).find(/* instance of text inside element has = immeadiatly afterwards or has spaces on either side */);          var html-value = $(code).find(/* instance of text inbetween 2 parenthesis */);          $(element).wrap('<span class="element" />');         $(attribute).wrap('<span class="attribute" />');         $(value).wrap('<span class="value" />');          $(code).find('<').replacewith('&lt');         $(code).find('>').replacewith('&gt');     }); }); 

how either of these coded, if @ possible

again can see jsfiddle here: http://jsfiddle.net/jameskyle/l4b8b/

don't sure have gotten there pretty-printing html in few lines. took me little more year , 2000 lines nail topic. can use code directly or refactor fit needs:

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

you can demo @ http://prettydiff.com/?m=beautify&html

the reason why takes code people don't seem understand or value importance of text nodes. if adding new , empty text nodes during beautification doing wrong , corrupting content. additionally, ease screw other way , remove white space inside content. have careful these or destroy integrity of document.

also, if document contains css or javascript. should pretty printed well, have different requirements html. html , xml have different requirements. please take word not simple thing figure out. html tidy has been @ more decade , still screws lot of edge cases.

as far know markup_beauty.js application complete pretty-printer ever written html/xml. know bold statement, , perhaps arrogant, far never been challenged. code , if there need not doing please let me know , around adding in.