Simple HTML Pretty Print

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

Это может быть бесполезным усилием , но лично я считаю, что это возможно.

Я не лучший специалист в Javascript или jQuery, но думаю, что нашел простой способ сделать простой prettyprint для html.

В этом красивом принте есть четыре типа кода:

1. Обычный текст
2. Элементы
3. Атрибуты
4. Значения

Чтобы стилизовать это, я хочу обернуть элементов , атрибуты и значения с промежутками с их собственными классами.

---

Первый способ, которым я могу это сделать, - это сохранить каждый отдельный вид элемента и атрибута (показано ниже), а затем заключить их в соответствующие промежутки

$(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('');
        $(attribute).wrap('');
        $(value).wrap('');

        $(code).find('<').replaceWith('<');
        $(code).find('>').replaceWith('>');
    });
});

---

Второй способ, который я придумал, - это обнаружение элементов как любое количество текста, окруженного двумя символами , затем обнаружите атрибуты как текст внутри элемента , который либо окружен двумя пробелами, либо имеет = сразу после него.

$(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 < > */);

        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('');
        $(attribute).wrap('');
        $(value).wrap('');

        $(code).find('<').replaceWith('<');
        $(code).find('>').replaceWith('>');
    });
});

Как можно было бы закодировать любой из них, если это вообще возможно

Снова вы можете увидеть это как jsfiddle здесь: http: // jsfiddle.net / JamesKyle / L4b8b /