javascripthtmlcsssyntaxhighlighter

Code Beautifier Tool for adding readability to the code

I went to the following link and saw they are using some tool which adds number lines and <pre> tags but I could not find any script which helps doing so, I also want my code to be seen like that. Can someone help me?

Link: https://www.tutorialrepublic.com/html-reference/html5-output-tag.php

Image:

enter image description here

Can someone help me? 

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

I want my code also to look like image with line numbers. Please, help me! I want that when I am writing my sample code in a Web Page as a tutorial -- To the end user it must not be seen as only code, but with line numbers and highlighting that is visible in the website linked. They have used some tool Syntax Highlighter but I am not sure how they did it.

Solution

  • This website is using CodeMiror for formatting their code. It is an online editor which you can implement in your projects. You can also use it for presenting code as they do.

    I am trying to make a general prof of concept for you. If I'll manage to make something I can live with, I'll attach it here later.

    EDIT: Here is a general prof of concept, feel free to use it :)

    // 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>