3 Easy Step To Add Prism Js Code Syntax Highlighter For Blogger

3 Easy Step To Add Prism Js Code Syntax Highlighter For Blogger

There are many bloggers who want to display code on their blogger blog, but it's headache for them. It's really hard to find the right way to do it, but no need to worry, in this lesson I'll show you how to add simple and beautiful syntax highlighter for blogger.


Syntax highlighter

First thing you have to know what is a code syntax highlighter?
Syntax highlighting is used to display code on your site or Blogger blog. Code highlighter help your user easily read HTML CSS etc.. codes, like if you want to show Html, CSS, JavaScript, PHP, Msql etc.. codes in a beautiful way, then you are in the right place.Code highlighter help your user easily read html css etc.. codes  .

Syntax highlighter built with JavaScript and css  which help a lot to share your code on your website or blog so your visitor can easily inaugurate with it. There are so many code highlighter, but in this lesson I'll cover prim. js syntax highlighter.

Prism JS Code Syntax highlighter

Prism js is a superficial and very lightweight code highlighter which built with modernized web standards. there are so many popular website and blog which uses primjs including meralesson we also use prim js for our blog its lightweight, extensible syntax highlighter.

Using Prim js code highlighter is dead simple you just have to add prism.CSS and prism. JS file to your blogger head section and whenever you want to show code, then just use HTML pre and code tags PRE><code>/code>/PRE> and add a class="language-xxxx" "class language -XXXX is used to display code which you want to show".

Language class  is only defined once for multiple code snippets, for example you want to show more then one code like say html and css then it would be class="language-markup css" . Prism.css ,prism.js and prism theme file all are around to 5KB and which is very fast to load in the main time. Prism js styling is concluded through CSS with sensible class names like like if you want to show html code then add class="language-markup" or CSS then class="language-css".
for more code snippets class click here.

for more code snippets click here.


Lets get started

1st step
now go to  Prism.js and download css and js like below.
3 Easy Step To Add Prism Js Code Syntax Highlighter For Blogger
3 Easy Step To Add Prism Js Code Syntax Highlighter For Blogger

Once you Downloaded both files, then upload these scripts to google drive and if you don't know how to host CSS, JS file In Google Dive then I strongly recommend you to read this How to Host CSS JS File In Google Drive.


2nd step
Once you uploaded prism.css and prism.js scripts files then login into your blogger account and then go to Template >> Edit html >> and click anywhere in the HTML Editor and then press CTRL+F to open search box to search the following code.
</head>


once you found </head> ending tag then just above it paste your prism.css and prism.js scripts .
3 Easy Step To Add Prism Js Code Syntax Highlighter For Blogger

when you all done then save your template 

3rd step
if you want to show html or css check it below.

HTML
<pre class="language-markup">
   <code>

   </code>
</pre>
CSS
<pre class="language-css">
   <code>

   </code>
</pre>


If you found this article helpful then please share it and you can also like us on facebook and follow us on twitter.

If you need any help then don't hesitate to ask.

You can also read How to Display Scripts and Codes in Blogger Posts


Help others achieve their dreams and you will achieve yours.-Les brown

Comments