There are many syntax highlighter you can use to highlight your codes in Blogger but most of them either do not work, or slows down the speed of page when it is loading. My preferred syntax highlighter so far is Prism.
Prism syntax highlighter is a lightweight extensible highlighter that do not affect your codes, does not slow down your blog loading and allows you to make changes to add more plugins as the need arises in your blog. Before Prism syntax highlighter, syntaxhighter by Alex Gorbatchev was most popular used by most bloggers and programmers.
Prism is very easy to install to blogger and highlight your html,css, and other codes, you just need to download two resources from Prism, upload them to your Google drive and you can highlight any code you want.
This short tutorial is going to show you how you can easily download and install prism highligher in Blogger, but before we proceed, you need to learn how you can upload and host your Javascript files and your CSS files in Googledrive, if you know how to do it then continue with the tutorial otherwise click the link below to read it before you continue with installing Prism Highlighter.
Read: How To Host Your CSS And Javascript Files In Google Drive
Steps To Add And Use Prism Highlighter In Blogger
Step 1
1. Go to Prism Highlighter download page to customize the theme you want.
2. Where it says "Compression Level" choose (tick) "Minified Version". By default this box will already be checked but you need to make sure anyway.
3. Select or check the box for the theme you want. There are about 6 themes you can choose from at the time of writing this post.
Tip: As you select the any theme, scroll down to see how it will look like in the box with big "Download Js" button. Techbadoo is making use of their default theme, this is because I considered the size and also my template design.
Languages:
Select the language you will be highlighting in your blog, I made use of only three in my blog: "Markup, Css, and Javascript". You can choose as many as you want depending on how you use codes in your blog but if you are like me, this three will be ok for you now, you can always come back and choose more when the need arises.
Note: As you choose more language and customization, the size of your highlighter increases and this may hinder the loading speed of your blog page later.
Plugins:
Select "Line Highlight" and "Line Numbers".
Choose more if you are a programmer
4. Download your Js and Css codes by clicking on that big button that says "Download JS" and "Download CSS" you have to do it one by one.
Open your downloaded files with notepad, save them and upload them to your Google drive. You will now copy the link and insert it to your blog template. Read how you can save and upload your css and js files in Google drive effectively.
How To Add Your Prism Js and Css file to Your Blogger template.
Open your Blogger dashboard, go to "Template" > "Edit HTML"
Adding CSS File
The link to your CSS file you hosted on Google drive will look like the one below (you can use mine if you want)
<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B4dlkozNjd9rVFRrNC1tLTdCUUk" />
Click anywhere inside your HTML and use Cntrl F to find </head>. Add your link just before </head>Adding JS File
The link to your JS file you hosted on Google drive will look like this one below (you can use mine)
<script src='https://googledrive.com/host/0B4dlkozNjd9reG5NYTVqd0xEYms' type='text/javascript'></script>
Add your Js file link just before </body> in your template.Now Save your template and exist.
Highlighting Codes in Your Aricles
Now to highlight code anytime you are writing article, switch to HTML editor of your Blogger and add the following code to call the syntax highlighter to action
<pre> <code class="language-markup"> ....Your codes here.....</code></pre>
Publish your post to see the magic happen.Am glad to hear your opinion about Prism highlighter in comment section.
.jpg)
