代码美化工具，用于增加代码的可读性答案

【问题标题】：Code Beautifier Tool for adding readability to the code代码美化工具，用于增加代码的可读性
【发布时间】：2017-11-22 10:13:26
【问题描述】：

我转到以下链接，看到他们正在使用一些添加数字行和

 标记的工具，但我找不到任何有助于这样做的脚本，我也希望我的代码能被这样看待。有人能帮我吗？ 

链接： https://www.tutorialrepublic.com/html-reference/html5-output-tag.php

图片：



有人可以帮助我吗？ 




<html> 
<head> </head> 
<body> 

	<div> This is a div </div>
	<p>This is a paragraph.</p>
	<span>This is a span.</p>
	<ul>
		<li>red</li>
		<li>green</li>
		<li>blue</li>
	</ul>
</body> 
</html> 




我希望我的代码也看起来像带有行号的图像。请帮我！当我在网页中编写示例代码作为教程时，我希望它——对于最终用户，它不能仅被视为代码，而是在链接的网站中可见的行号和突出显示。他们使用了一些工具 Syntax Highlighter，但我不确定他们是如何做到的。

【问题讨论】：

使用 Sublime 并安装 Pretiffy 插件

标签： javascript html css syntaxhighlighter

【解决方案1】：

本网站使用CodeMiror 来格式化他们的代码。它是一个在线编辑器，您可以在您的项目中实施。你也可以像他们一样使用它来展示代码。

我正在尝试为您做一个一般性的概念教授。如果我能做出一些我能忍受的东西，我会在稍后附上。

编辑： 这是概念的一般教授，请随意使用它:)

// 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, "&lt;").replace(/>/g, "&gt;")}</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>&lt;form&gt;</pre>
  </li>
  <li>
    <pre>&thinsp;&lt;label&gt;Formatted Form&lt;/label&gt;</pre>
  </li>
  <li>
    <pre>&thinsp;&lt;input type="text" name="first" placeholder="first name" /&gt;</pre>
  </li>
  <li>
    <pre>&thinsp;&lt;input type="text" name="last" placeholder="last name" /&gt;</pre>
  </li>
  <li>
    <pre>&thinsp;&lt;input type="submit" value="send" /&gt;</pre>
  </li>
  <li>
    <pre>&lt;/form&gt;</pre>
  </li>
</ol>

【讨论】：

【解决方案2】：

你可以下载 Sublime text 3，或者 Atom 并且你可以在 sublime text 3 中安装 Html-css-prettify 插件，对你有帮助。

【讨论】：