How to Beautify Code of Website within Browser using Syntax Highlighter

Updated on: August 14, 2023

Syntax highlighting is a feature that allows you to format code in a way that makes it easier to read and understand. It assigns colors and fonts to different keywords, symbols, and programming constructs. This can be very helpful when you are trying to debug code or learn a new programming language.

Many different syntax highlighters are available, but one of the most popular is Prism.js. It is a lightweight, open-source syntax highlighter that supports over 200 programming languages. It is also very easy to use.

How to Use the Best Syntax Highlighter to Beautify Code on any website

Prism.js is one of the best code beautifier tools which helps you to beautify code of any language within your website [if you are a developer] or within your browser if you are an end-user [not a developer].

1. How to Implement Code Beautifier within Your Website [For Developers]

Install the Prism.js library. You can download the library from the Prism.js website or use a package manager like GitHub, npm, or yarn during your development.
Add the Prism.js script tag to your website's HTML header. The script tag should point to the location of the Prism.js library that you uploaded to your server in Step 1. You can upload a 'Prism.css' file if you want CSS for your code.
Wrap the code that you want to highlight in a <code> tag.
Add the class="language-[language-name]" attribute to the <code> tag, where [language-name] is the name of the programming language that the code is written in.
Prism.js support 297 languages, so you must choose the appropriate one for your use case. For example, if you want to highlight some JavaScript code, you must select a language code and wrap the code in a <code class="language-javascript"> tag.
That's it! When end users visit your webpage, the Prism.js library will automatically highlight the Code in your browser.

Here is an example of how to use Prism.js Code Formatter to highlight some JavaScript code:

<head>
<script src="prism.js"></script>
<link rel="stylesheet" href="prism.css">
</head>
<body>
  <code class="language-javascript">
    var myVar = "Hello, BlogSaays users!";
    console.log(myVar);
  </code>
</body>

This code will highlight the JavaScript code in your browser, making it easier to read and understand by your end users.

Here are some additional tips for using Prism.js in your web development :

You can use the codepen class to make the code resizable and interactive.
You can use the line-numbers class to add line numbers to the code.
You can use the highlight-lines class to highlight specific lines of code.
You can use the show-language class to show the programming language's name in the code block.
Please refer to this information for more syntax highlighting of Prism.js
It beautify javascript, beautifies c++ code, beautifies XML code, beautifies Java code, beautifies python code, beautifies HTML code & many more programming language codes.

2. Use a 1-click script to beautify source code of the website within your browser using beautifier code JS:

1. If you are not a developer of the website & you still want to see the beautified source code of any website then bookmark below JS script in your browser's bookmark bar.
2. To bookmark it, simply go to "chrome://bookmarks/"-> add the above JS code and name your bookmark & save it.
3. After successfully adding the recently saved bookmark into the 'Bookmarkbar' of your browser. You can render & beautify the source code of any website within 1 click. Please refer below video for a demo.

Here are some additional things to keep in mind when using Prism.js:

Prism.js does not support all programming languages. You can check the list of supported languages on the Prism.js website.
Prism.js can be slow for large code blocks. You can use the async option to highlight the code asynchronously.
Prism.js can be a bit finicky with pre-existing HTML in the code block. You can use the disable-highlight-on-copy option to prevent Prism.js from highlighting the code when you copy it.

Conclusion:

A beautifier code is a valuable tool for making code easier to read and debug. It's a handy tool for programmers like me when we want to look into the code of different online websites. It helps all developers to speed up their work and debugging. Being an open-source JS library Prism.js is safe and secure to use within your browser. Make sure you always download it from the official website/git repositories. Avoid downloading ay scripts from 3rd party websites to protect your data.

Saurabh Mukhekar

Saurabh Mukhekar is a Professional Tech Blogger. World Traveler. He is also thinker, maker, life long learner, hybrid developer, edupreneur, mover & shaker. He's captain planet of BlogSaays and seemingly best described in rhyme. Follow Him On Facebook