How To Setup Syntax Highlighter on Blogger 2020

If You are searching on how to setup syntaxhighlighter on blogger you are in the right place because you are going to learn how to setup syntax highlighter on blogger with this guide.

Blogger is a free platform where most beginner start their blog and when it comes to customizing they later notice that blogger lack a lot of things

Unlike hosted WordPress which has thousands of plugin for you to do what you want.

how to setup syntax highlighter on blogger

If you start a serious blog on blogger definitely you would have come to this question how to set up a syntax highlighter on blogger

But still blogger is one of the best of offering free hosting for creators.

They are more legit compare to others who are good in black mailing people

With the free service they offer, telling you that you have reached the limits and violate their terms

You should upgrade or in the next fifteen to thirty days your website will be deleted for ever.

for more insights you can check this required post Disadvantages of Using a Free Web Hosting

how to setup syntax highlighter on blogger

There are three ways you are going to learn on how to setup syntax highlighter on blogger

Among the three you should choose the one you preferred, you don’t need to worry because among the three listed here, you are free to try all of them and choose which is more easy to set.
how to setup a syntax highlighter on blogger

how to setup syntax highlighter on blogger

As a beginner you face a lot of things because you are new to the system and with this brief guide you are going to be using syntax highlighter on your blogspot blog with out facing any problem.

Here are the following ways you can use and setup syntax highlighter on blogger

Google Code Prettify

Google code prettify is another way you can use to syntax highlight on blogger.
Using Google prettify you have to edit your template and put some codes in it.
Remember that any time you want to put code in your template try to make a backup, because if you make things go wrong you can restore your template back.
Go to your Blogger > Layout > Edit HTML and 
Copy the following snippet and paste it after <head> in the “Edit template”
<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/>
<script src='http://TV-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'></script>

Then after <head> replace <body>with this

<body onload='prettyPrint()'>

You can now save your template, then
Go to Blogger New Post and Make sure you’re editing the HTML by clicking on “Edit HTML.” In the empty field try wrapping your code at this

<pre class="prettyprint">int foo=0; NSLog(@"%i", foo); </pre>

If you click preview your code can go black but don’t worry,you can publish and things will be fine.

Google prettify should be the best for blogger because it is provided by Google it’s self.

I heard a rumor that Google prettify is going away but if you use it and it’s still working then you can post a comment.

You can check the other options provided below.

 

Alex gorbatchev Syntax Highlighter

Another way is to use alex gorbatchev syntax highlighter on your blog but what you have to do is to edit your template and put code inside.

Login to the blogger blog you want to syntax highlights and go to theme or template

Make sure you backup your template before you put any code inside because if anything goes wrong you will be able to restore it back.

After login to your blogger blog choose the option ‘theme’ or template, go to the ‘edit html’ then your template will open.

Copy this code and paste it just above the  <head> tag

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<!-- END INCLUDE SyntaxHighlighter Components -->

<!-- INCLUDE YOUR BRUSHES WHICH YOU WANT TO USE HERE -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>

<!-- END INCLUDE BRUSHES -->
<!-- INIT SyntaxHighlighter -->
<script type='text/javascript'>
   SyntaxHighlighter.config.bloggerMode = true;
   SyntaxHighlighter.all();
</script>

After pasting, save and close your template.

Open your post editor and choose html editor.

After choosing html editor enclose your code with these tags

<pre class="brush:language name(html) in this case"><----your code's HTML----></pre>

 

online syntax highlighter

There are tools you can use online as syntax highlighter for your blog. When you search for tools like that on Google you will see a lot of them.

You have to know which one will do the job well for you, I will list the best online syntax highlighters for you.

pinetools.com
tohtml.com

You can use pinetools or tohtml, to syntax highlights your code online fast and easy.

If you are using any online syntax highlighter which are good, let’s know through your comments.

As I said earlier you are free to choose which is more easy for you to setup, now it’s left for you to try.

When supermoonhost was hosted on Google blogger

Supermoonhost start using tohtml and discover it has conflict with our preferred template but it works fine with other theme.

Then I decided to switch to pinetools and I enjoy it but for pinetools to work for you, you have to change from compose tab to html.

That’s is just the difference.

If you use any of these syntax highlights services and you prefer one then you can throw a comment.

You see how simple to setup syntax highlighter on blogger, now it’s left for you to do the job.

Leave a Comment

Your email address will not be published. Required fields are marked *