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

Question

我去了以下 link 并看到他们正在使用一些工具来添加数字行和

 标签，但我找不到任何有助于这样做的脚本，我也希望我的代码是看到那样。有人能帮我吗？ 

Link: 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> 





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

Answer 1

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

Answer 2

此网站正在使用 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, ) => {
    return `=<span| class="attr-value">${}</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>

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

Code Beautifier Tool for adding readability to the code

html

javascript

css

syntaxhighlighter