title: Simple HTML Pretty Print
body: <blockquote>
    <p><a href="http://jsfiddle.net/JamesKyle/L4b8b/" rel="noreferrer">http://jsfiddle.net/JamesKyle/L4b8b/</a></p>
  </blockquote>
  
  <p>This may be a futile effort, but I personally think its possible.</p>
  
  <p>I'm not the best at Javascript or jQuery, however I think I have found a simple way of making a simple prettyprint for html.</p>
  
  <p>There are four types of code in this prettyprint: </p>
  
  <ol>
  <li>Plain Text</li>
  <li>Elements</li>
  <li>Attributes</li>
  <li>Values</li>
  </ol>
  
  <p>In order to stylize this I want to wrap <code>elements</code>, <code>attibutes</code> and <code>values</code> with spans with their own classes. </p>
  
  <hr>
  
  <p>The first way I have of doing this is to store every single kind of element and attribute (shown below) and then wrapping them with the corresponding spans</p>
  
  <pre><code>$(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(/* Any instance of text inbetween two parenthesis */);
  
          $(element).wrap('&lt;span class="element" /&gt;');
          $(attribute).wrap('&lt;span class="attribute" /&gt;');
          $(value).wrap('&lt;span class="value" /&gt;');
  
          $(code).find('&lt;').replaceWith('&amp;lt');
          $(code).find('&gt;').replaceWith('&amp;gt');
      });
  });
  </code></pre>
  
  <hr>
  
  <p>The second way I thought of was to detect <code>elements</code> as any amount of text surrounded by two &lt; >'s, then detect <code>attributes</code> as text inside of an <code>element</code> that is either surrounded by two spaces or has an <code>=</code> immediately after it.</p>
  
  <pre><code>$(document).ready(function() {
  
      $('pre.prettyprint.html').each(function() {
  
          $(this).css('white-space','pre-line');
  
          var code = $(this).html();
  
          var html-element = $(code).find(/* Any instance of text inbeween two &lt; &gt; */);
  
          var html-attribute = $(code).find(/* Any instance of text inside an element that has a = immeadiatly afterwards or has spaces on either side */);
  
          var html-value = $(code).find(/* Any instance of text inbetween two parenthesis */);
  
          $(element).wrap('&lt;span class="element" /&gt;');
          $(attribute).wrap('&lt;span class="attribute" /&gt;');
          $(value).wrap('&lt;span class="value" /&gt;');
  
          $(code).find('&lt;').replaceWith('&amp;lt');
          $(code).find('&gt;').replaceWith('&amp;gt');
      });
  });
  </code></pre>
  
  <p>How would either of these be coded, if at all possible</p>
  
  <blockquote>
    <p>Again you can see this as a jsfiddle here:
    <a href="http://jsfiddle.net/JamesKyle/L4b8b/" rel="noreferrer">http://jsfiddle.net/JamesKyle/L4b8b/</a></p>
  </blockquote>