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 highlighterFirst thing you have to know what is a code syntax highlighter?
Prism JS Code Syntax highlighterPrism 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
now go to Prism.js and download css and js like below.
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.
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.
once you found </head> ending tag then just above it paste your prism.css and prism.js scripts .
when you all done then save your template
if you want to show html or css check it below.
<pre class="language-markup"> <code> </code> </pre>
<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