Enhance your code's readability with the Code Beautifier Tool for improved clarity

Question

Enhance your code's readability with the Code Beautifier Tool for improved clarity

I recently came across a website where they intricately formatted their code with line numbers and highlighting, but I couldn't find any information on how to achieve this effect. I want my code to look just like that, can anyone help me out?

Website Link:

Can someone assist me in achieving this polished code presentation?

<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 am aiming for the same sleek code styling with line numbers seen in the example image linked above. Can you lend a hand with replicating it? My goal is to enhance the appearance of my tutorial by displaying code snippets in a user-friendly way, similar to what was achieved using the Syntax Highlighter tool on the mentioned site.

javascript html css syntaxhighlighter

Answer 1

Answer №1

This site utilizes CodeMirror for code formatting. CodeMirror is an online editor that can be integrated into various projects. It also serves as a tool for showcasing code snippets.

I am currently working on developing a proof of concept for demonstration purposes. Once I have something satisfactory, I will share it here later on.

UPDATE: I have created a general proof of concept for reference. Please feel free to make use of it :)

// array containing all HTML tags sourced from MDN
var tagsArr = ["<\/?a", "<\/?abbr", "<\/?acronym", "<\/?address", "<\/?applet", "<\/?article", "<\/?aside", "... and many more"];

// sorting the tags by length to prevent shorter tags being overlapped
tagsArr.sort(function(a, b) {
  return a.length >= b.length
})

var tagsStr = tagsArr.join("|");

var tagsRegEx = new RegExp(tagsStr, "g");

// array of attributes extracted from W3Schools
var attrsArray = ["baccept", "accept-charset", "accesskey", "action", "align", "alt", "async", "... and more ..."];

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) => {
    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|>`;
  })
  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;
}

... additional CSS styles ...

<ol>
  <li>
    <pre>&lt;form&gt;</pre>
  </li>
  
  ... sample HTML code snippets ...
  
</ol>

Answer 2

This site utilizes CodeMirror for code formatting. CodeMirror is an online editor that can be integrated into various projects. It also serves as a tool for showcasing code snippets.

I am currently working on developing a proof of concept for demonstration purposes. Once I have something satisfactory, I will share it here later on.

UPDATE: I have created a general proof of concept for reference. Please feel free to make use of it :)

// array containing all HTML tags sourced from MDN
var tagsArr = ["<\/?a", "<\/?abbr", "<\/?acronym", "<\/?address", "<\/?applet", "<\/?article", "<\/?aside", "... and many more"];

// sorting the tags by length to prevent shorter tags being overlapped
tagsArr.sort(function(a, b) {
  return a.length >= b.length
})

var tagsStr = tagsArr.join("|");

var tagsRegEx = new RegExp(tagsStr, "g");

// array of attributes extracted from W3Schools
var attrsArray = ["baccept", "accept-charset", "accesskey", "action", "align", "alt", "async", "... and more ..."];

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) => {
    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|>`;
  })
  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;
}

... additional CSS styles ...

<ol>
  <li>
    <pre>&lt;form&gt;</pre>
  </li>
  
  ... sample HTML code snippets ...
  
</ol>

Answer 3

Answer №2

For those looking to enhance their coding experience, consider downloading Sublime Text 3 or Atom and then installing the Html-css-prettify plugin in Sublime Text 3. It's a great tool that can greatly assist you in your work.

Answer 4

For those looking to enhance their coding experience, consider downloading Sublime Text 3 or Atom and then installing the Html-css-prettify plugin in Sublime Text 3. It's a great tool that can greatly assist you in your work.

Enhance your code's readability with the Code Beautifier Tool for improved clarity

Answer №1

Answer №2

Similar questions

Is it possible to modify the page contents using the htaccess file?

SystemJS is loading classes that are extending others

Using react hooks, I am refreshing the product image by replacing it with the thumbnail image

What's the best way to dynamically show Bootstrap collapse panels in a loop with AngularJS ng-repeat?

Issue with the _.filter function in lodash library when used in a Node.js environment

Struggling to access YouTube account via Google sign-in using Puppeteer framework

Tips on incorporating an item into an array solely when a specific condition is met

I'm having trouble getting the gutter padding to show up in one specific content block on my Bootstrap webpage. How can I troubleshoot and resolve this

Integrate SVG directly into the three.js module to eliminate the need for an additional HTTP request

Generating real-time post previews in a web application using .NET MVC 3, similar to the functionality seen on StackOverflow

Show the button only if the checkbox is selected

Tips for determining whether the current request is an AJAX request in MVC3 view using JavaScript

Error occurred within node while attempting to create a directory using mkdirsync

When utilizing the multipart/form-data content type in a form, the files being sent are transmitted as blank

Utilizing Angular to intercept AJAX requests, verifying internet connectivity before proceeding with sending the request

Utilizing AJAX for remote execution of JavaScript code

Sending intricate JavaScript object to the controller. The array of objects is consistently empty

Navigate the orbit control camera in a circular motion around the target object

ASP.NET failing to execute Javascript

Sending a POST request from a React child component to an Express server