// array of all html tags taken from mdn
var tagsArr = ["<\/?a", "<\/?abbr", "<\/?acronym", "<\/?address", "<\/?applet", "<\/?article", "<\/?aside", "<\/?audio", "<\/?b", "<\/?font", "<\/?bdi", "<\/?bdo", "<\/?bgsound", "<\/?big", "<\/?blink", "<\/?blockquote", "<\/?body", "<\/?button", "<\/?canvas", "<\/?caption", "<\/?center", "<\/?cite", "<\/?code", "<\/?colgroup", "<\/?data", "<\/?datalist", "<\/?dd", "<\/?del", "<\/?details", "<\/?dfn", "<\/?dir", "<\/?div", "<\/?dl", "<\/?dt", "<\/?em", "<\/?fieldset", "<\/?figcaption", "<\/?figure", "<\/?font", "<\/?footer", "<\/?form", "<\/?frame", "<\/?frameset", "<\/?h1", "<\/?h2", "<\/?h3", "<\/?h4", "<\/?h5", "<\/?h6", "<\/?head", "<\/?header", "<\/?hgroup", "<\/?html", "<\/?i", "<\/?ins", "<\/?isindex", "<\/?kbd", "<\/?label", "<\/?legend", "<\/?li", "<\/?listing", "<\/?map", "<\/?mark", "<\/?marquee", "<\/?menu", "<\/?meter", "<\/?nav", "<\/?nobr", "<\/?noframes", "<\/?noscript", "<\/?object", "<\/?ol", "<\/?optgroup", "<\/?option", "<\/?output", "<\/?p", "<\/?plaintext", "<\/?pre", "<\/?progress", "<\/?q", "<\/?rp", "<\/?rt", "<\/?ruby", "<\/?s", "<\/?samp", "<\/?script", "<\/?section", "<\/?select", "<\/?small", "<\/?spacer", "<\/?span", "<\/?strike", "<\/?strong", "<\/?style", "<\/?sub", "<\/?summary", "<\/?sup", "<\/?table", "<\/?tbody", "<\/?td", "<\/?textarea", "<\/?tfoot", "<\/?th", "<\/?thead", "<\/?time", "<\/?title", "<\/?tr", "<\/?tt", "<\/?u", "<\/?ul", "<\/?var", "<\/?video", "<\/?xmp", "<\/?area", "<\/?base", "<\/?br", "<\/?col", "<\/?command", "<\/?embed", "<\/?hr", "<\/?img", "<\/?input", "<\/?keygen", "<\/?link", "<\/?menuitem", "<\/?meta", "<\/?param", "<\/?source", "<\/?track", "<\/?wbr", "\/?>"];
// sort by tag name length so short tags don't get longer tag name
tagsArr.sort(function(a, b) {
return a.length >= b.length
})
var tagsStr = tagsArr.join("|");
var tagsRegEx = new RegExp(tagsStr, "g");
// array of all attributes, taken from w3school
var attrsArray = ["baccept", "accept-charset", "accesskey", "action", "align", "alt", "async", "autocomplete", "autofocus", "autoplay", "bgcolor", "border", "charset", "checked", "cite", 'class(?!="(attr|attr-value|tag)")', "color", "cols", "colspan", "content", "contenteditable", "contextmenu", "controls", "coords", "data", "data-*", "datetime", "default", "defer", "dir", "dirname", "disabled", "download", "draggable", "dropzone", "enctype", "for", "form(?!\|)", "formaction", "headers", "height", "hidden", "high", "href", "hreflang", "http-equiv", "id", "ismap", "kind", "label(?!\|)", "lang", "list", "loop", "low", "max", "maxlength", "media(?!\|)", "method", "min", "multiple", "muted", "name", "novalidate", "onabort", "onafterprint", "onbeforeprint", "onbeforeunload", "onblur", "oncanplay", "oncanplaythrough", "onchange", "onclick", "oncontextmenu", "oncopy", "oncuechange", "oncut", "ondblclick", "ondrag", "ondragend", "ondragenter", "ondragleave", "ondragover", "ondragstart", "ondrop", "ondurationchange", "onemptied", "onended", "onerror", "onfocus", "onhashchange", "oninput", "oninvalid", "onkeydown", "onkeypress", "onkeyup", "onload", "onloadeddata", "onloadedmetadata", "onloadstart", "onmousedown", "onmousemove", "onmouseout", "onmouseover", "onmouseup", "onmousewheel", "onoffline", "ononline", "onpagehide", "onpageshow", "onpaste", "onpause", "onplay", "onplaying", "onpopstate", "onprogress", "onratechange", "onreset", "onresize", "onscroll", "onsearch", "onseeked", "onseeking", "onselect", "onshow", "onstalled", "onstorage", "onsubmit", "onsuspend", "ontimeupdate", "ontoggle", "onunload", "onvolumechange", "onwaiting", "onwheel", "open", "optimum", "pattern", "placeholder", "poster", "preload", "readonly", "rel", "required", "reversed", "rows", "rowspan", "sandbox", "scope", "scoped", "selected", "shape", "size", "sizes", "span(?!\|)", "spellcheck", "src", "srcdoc", "srclang", "srcset", "start", "step", "style", "tabindex", "target", "title(?!\|)", "translate", "type", "usemap", "value", "width", "wrap"];
// sort by attr name length so short attr don't get longer attr name
attrsArray.sort(function(a, b) {
return a.length >= b.length
})
var attrsStr = "(\\b" + attrsArray.join("\\b)(?!\")|(\\b") + "\\b)(?!\")";
var attrsRegEx = new RegExp(attrsStr, "g");
var pres = document.querySelectorAll("pre");
pres.forEach((code, idx) => {
var formatted;
code = code.innerText;
formatted = code.replace(tagsRegEx, (match) => {
// for tags that also has attr with same name, add a "|" in the end, later on will be removed
if (match.match(/(span)|(form)|(label)|(media)/)) {
match += "|";
}
return `<span| class="tag">${match.replace(/</g, "<").replace(/>/g, ">")}</span|>`;
})
formatted = formatted.replace(attrsRegEx, (match) => {
return `<span| class="attr">${match}</span|>`;
})
formatted = formatted.replace(/=("(?!(attr)|(attr-value)|(tag)).*?")/g, (match, $1) => {
return `=<span| class="attr-value">${$1}</span|>`;
})
// remove all add "|"
formatted = formatted.replace(/\|/g, "");
pres[idx].innerHTML = formatted;
})
body {
background-color: white;
}
ol {
border: 1px solid #e5e5e5;
padding-left: 15px;
}
li:nth-child(even) {
background-color: #e5e5e5;
}
li:nth-child(odd) {
background-color: white;
}
li {
border-left: 2px solid lightgreen;
height: 100%;
font-size: 0.5em;
}
pre {
margin-left: 5px;
background-color: inherit;
font-size: 0.7em;
display: inline-block;
}
.tag {
color: blue;
}
.attr {
color: gray;
}
.attr-value {
color: purple;
}
<ol>
<li>
<pre><form></pre>
</li>
<li>
<pre> <label>Formatted Form</label></pre>
</li>
<li>
<pre> <input type="text" name="first" placeholder="first name" /></pre>
</li>
<li>
<pre> <input type="text" name="last" placeholder="last name" /></pre>
</li>
<li>
<pre> <input type="submit" value="send" /></pre>
</li>
<li>
<pre></form></pre>
</li>
</ol>
사용 라임을 자유롭게 사용하고 Pretiffy 플러그인 설치 –