How To Set up a Syntax Highlighter on Blogger

Published by PT on

You are going to learn how to set up a syntax highlighter on blogger.

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.

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 because the are more legit compare to others who are good in blackmailing people because of 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 insight you can also check this required post What Are The Disadvantages of Using a Free Web Hosting

how to setup a syntax highlighter on blogger

There are three ways you are going to learn on how to set up syntax highlighter on blogger and among the three we use one and we preferred using it but don’t worry because among the three listed here, I am going to tell the one we use.
how to setup a 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 syntax highlighter on blogger

Google Code Prettify

Google code prettify is another way you can use to syntax highlight on blogger but 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 or you 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, but 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 but you have to know which one will done the job well for you and tha is the onesthat is going to be listed here.

pinetools.com
tohtml.com

As I said earlier I am going to tell you how supermoonhost syntax highlight. Those are the tools used here at supermoonhost to highlight code.

Supermoonhost start using tohtml and discover it has conflict with it theme but it works fine with other theme so I decided to switch to pinetools and I enjoy it but for pinetools to work you have to change from compose tab to html.

That’s is just the difference.

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

How to set up syntax highlighter for blogger first published here at supermoonhost.

Categories: Blogger

0 Comments

Leave a Reply

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