Home > Blogging Tips > How to Add Syntax Highlighter to Blogger or Blogspot Blog

How to Add Syntax Highlighter to Blogger or Blogspot Blog


I run a web programming blog with tutorials. Where programming code has got the most importance. Hence i needed my code in any tutorial to be highlighted with colors. I searched throughout. I landed into the SyntaxHighlighter plugin for WordPress. Which easily integrates into WordPress.

But my requirement was to embed SyntaxHighlighter into Bloggeras i run my blog on Blogger.com. The following steps may help.

Step 1: Backup your blogger template

 

In your left side navigation menu click on Template. Then at the very top-right corner you can find a button to “Backup/Restore” your blogger template design.

 

Step 2:  Edit Blogger Template in New Blogger Interface

 

 

Navigate to Blogger dashboard > Layout > Edit HTML  and Expand Widget Templates. Search for <head> and replace it with the below code

<head>

<link href='https://sites.google.com/site/itswadesh/codehighlighter/shCore.css' rel='stylesheet' type='text/css'/>

<link href='http://sites.google.com/site/itswadesh/codehighlighter/shThemeDefault.css' rel='stylesheet' type='text/css'/>

<script src='http://sites.google.com/site/itswadesh/codehighlighter/shCore.js' type='text/javascript'/>

<script src='http://sites.google.com/site/itswadesh/codehighlighter/shBrushCss.js' type='text/javascript'/>

<script src='http://sites.google.com/site/itswadesh/codehighlighter/shBrushJScript.js' type='text/javascript'/>

<script src='http://sites.google.com/site/itswadesh/codehighlighter/shBrushXml.js' type='text/javascript'/>

<script type='text/javascript'>

SyntaxHighlighter.all()

</script>

Step 3: Write Your Programming Code inside <pre> Tag

 

Whenever you publish a post with Programming Code, include the code within the <pre> section

<pre class=”brush: js”>
Your script here
</pre>

Example:

<pre class="brush: js">
$(document).bind('click', function(e) {

            var $clicked = $(e.target);
            if (! $clicked.parents().hasClass("staticMenu")){
                $(".staticMenu dd ul").hide();
                $(".staticMenu dt a").removeClass("selected");
            }        });

</pre>
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 73 other followers

%d bloggers like this: