http://jsfiddle.net/JamesKyle/L4b8b/
Это может быть бесполезным усилием, но я лично считаю, что это возможно.
Я не лучший в Javascript или jQuery, однакоЯ думаю, что нашел простой способ сделать простой prettyprint для html.
В этом prettyprint есть четыре типа кода:
- Обычный текст
- Элементы
- Атрибуты
- Значения
Чтобы стилизовать это, я хочу обернуть elements, attibutes и values интервалами с собственными классами.
Первый способ сделать это - сохранить каждый вид элемента и атрибута (как показано ниже), а затем обернуть их соответствующими интервалами
$(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('<span class="element" />');
$(attribute).wrap('<span class="attribute" />');
$(value).wrap('<span class="value" />');
$(code).find('<').replaceWith('<');
$(code).find('>').replaceWith('>');
});
});
Второй способ, о котором я подумал, - обнаружить elements как любое количество текста, окруженного двумя <>, а затем обнаружить attributes как текст внутри element, который либо окружен двумя пробелами, либо имеет = сразу после него.
$(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('<span class="element" />');
$(attribute).wrap('<span class="attribute" />');
$(value).wrap('<span class="value" />');
$(code).find('<').replaceWith('<');
$(code).find('>').replaceWith('>');
});
});
Как будет закодирован любой из них, если это вообще возможно
Опять вы можете увидеть это здесь как jsfiddle: http://jsfiddle.net/JamesKyle/L4b8b/