http://www.bloggermint.com/2010/02/how-to-add-syntax-highlighter-for-bloggerblogspot/
http://www.bloggersentral.com/2009/04/how-to-show-code-in-blog-post.html
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.
Live demo
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
<link href='http://sites.google.com/site/bloggermintcom/shCore.css' rel='stylesheet' type='text/css'/>Step 2: Whenever you publish a post with script, include the script within the <pre> section
<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>
<pre class=”brush: js”>
Your script here
</pre>
For an example
1 | <pre class="brush: js"> |
2 | <div id="tweets"> |
3 | <script type='text/javascript'> |
4 | $(function(){ |
5 | $('#tweets').tweetable({username: 'bloggermint', time: true, limit: 5}); |
6 | }); |
7 | </script> |
8 | </div> |
9 | </pre> |
No comments:
Post a Comment