Code syntax higlighter using Prism js

Recognizing the Issue:-

So we all might have been in situations where we are creating blog websites and of course if it's a programming blog you might need to show some pieces of codes. So, there are some specific tags we have for code sections like pre, code tags available. But sometimes they falls short to format your pieces of code. So we will see this by  an example. This is a simple code we will use first using pre,code tags to show a csharp(c#) code

  for (int a = 1; a < 10; a++)
  {
        Console.WriteLine("Value of a is - " + a);
  }

So here is the output you will see normally in below image . You will see a box created and your code placed into that. So will see how to get bit styling on that.

Prism js

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in millions of websites, including some of those you visit daily. And we will use this for styling the syntax of our code segments. The thing i personally liked a lot about this was it supports styling as per syntax of almost all programming language including big ones like C#, Java,Jquery,css and lots of others. We will see how it works.

First of all go to  https://prismjs.com/ and follow some steps.

click on the download button there and this will redirect to a page where you can scroll to the bottom and see list of languages it supports.

You can select all simply so your website support highlighting syntaxes for all of those. You can select according to your requirements and scroll down the page where you will see download js and download css buttons. Download both of those

So now place the downloaded files in your project and link them on your html page or wherever you want to use your styling

So the files must be names prism.js and prism.css.

prism (1).js in my image because it was downloaded again. So don't mind that.

So now we will add the link on page for css and js.The only thing you have to worry about is adding class on code tag. "language-csharp" actually means this will apply csharp styling to that piece of codes.You can get language codes from here

So here all the languages are mentioned with specific class codes for there syntaxes. For example if you want CSS styling we will use language-css in class on code tag. Here is the piece of example code.

So you can see different classes for different types of codes. Add these classes and check the output. You code segments will have pretty colourful formatting.

This is the output you can see now. So this is how you can beautify your blogs. Prism js also offers many more features apart from colouring which you can check on there website. For example it also offers line numbers.