Syntax Highlighter are generally used for blogs, which mainly focus on scripting tutorials. We could have seen in many popular blogs using script highlighter to highlight the script. It not only highlight the script, but also give us a clear idea, how the script was formulated. This javascript can be capable of displaying css, xml, jscript, python, c# and much more supported programing languages. Most of the blogs are using the older version of Syntax Highlighter created by Alexgorbatchev. So here I am going to teach you, how to install syntax highlighter 2.1 (latest version) on your blogger / blogspot blogs. Before you could get in to the process, I recommend you to back up your template.
Step 1: I made the installation steps more simple to help people implement it without any mess. Navigate to Blogger dashboard > Layout > Edit HTML and Expand Widget Templates. Search for <head> and replace it with the below code.
<head>
<link href='http://sites.google.com/site/bloggermintcom/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://sites.google.com/site/bloggermintcom/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://sites.google.com/site/bloggermintcom/shCore.js' type='text/javascript'/>
<script src='http://sites.google.com/site/bloggermintcom/shBrushCss.js' type='text/javascript'/>
<script src='http://sites.google.com/site/bloggermintcom/shBrushJScript.js' type='text/javascript'/>
<script src='http://sites.google.com/site/bloggermintcom/shBrushXml.js' type='text/javascript'/>
<script type='text/javascript'>
SyntaxHighlighter.all()
</script>
Step 2: Whenever you publish a post with script, include the script within the <pre> section
<pre class=”brush: js”>
Your script here
</pre>
For an example:
<pre class="brush: js">
<div id="tweets">
<script type='text/javascript'>
$(function(){
$('#tweets').tweetable({username: 'bloggermint', time: true, limit: 5});
});
</script>
</div>
</pre>
Will display like the below image on your blog post.
Before adding any script within <pre>, make the script postable on your blogs. In order to do that use Postable by Elliotswan. This makes your script visible more faster on your blog. I tested in all the major web browser and it works perfectly fine.
Step 1: I made the installation steps more simple to help people implement it without any mess. Navigate to Blogger dashboard > Layout > Edit HTML and Expand Widget Templates. Search for <head> and replace it with the below code.
<head>
<link href='http://sites.google.com/site/bloggermintcom/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://sites.google.com/site/bloggermintcom/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://sites.google.com/site/bloggermintcom/shCore.js' type='text/javascript'/>
<script src='http://sites.google.com/site/bloggermintcom/shBrushCss.js' type='text/javascript'/>
<script src='http://sites.google.com/site/bloggermintcom/shBrushJScript.js' type='text/javascript'/>
<script src='http://sites.google.com/site/bloggermintcom/shBrushXml.js' type='text/javascript'/>
<script type='text/javascript'>
SyntaxHighlighter.all()
</script>
Step 2: Whenever you publish a post with script, include the script within the <pre> section
<pre class=”brush: js”>
Your script here
</pre>
For an example:
<pre class="brush: js">
<div id="tweets">
<script type='text/javascript'>
$(function(){
$('#tweets').tweetable({username: 'bloggermint', time: true, limit: 5});
});
</script>
</div>
</pre>
Will display like the below image on your blog post.
Before adding any script within <pre>, make the script postable on your blogs. In order to do that use Postable by Elliotswan. This makes your script visible more faster on your blog. I tested in all the major web browser and it works perfectly fine.
