Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I display code better on my blogger blog?

Tags:

These days, in any site where they show a code fragments (even in Stackoverflow), the code is nicely wrapped around a GUI element which highlights syntax elements, provides line numbers, etc. I want to show some ruby on rails code in my blog and I want those visual elements in my blog.

How can I accomplish this on my blogger blog?

like image 843
Anand Avatar asked Oct 29 '09 14:10

Anand


2 Answers

Click on "Edit HTML" in Blogger and then insert the following in the <head> section of your HTML:

<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shLegacy.js"></script> <link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css" /> <link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css" />     <script language="javascript"> window.onload = function () {     dp.SyntaxHighlighter.ClipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';     dp.SyntaxHighlighter.HighlightAll('code');     dp.SyntaxHighlighter.BloggerMode(); } </script> 

and the following into the <body> wherever you want to put your code:

<pre class="brush: ruby" name="code"># Your Ruby Code</pre> 
like image 132
sfarbota Avatar answered Mar 01 '23 02:03

sfarbota


Using the links Alex Reitbort provided you can integrate this in your Blogger blog using one of the following tutorials:

http://heisencoder.net/2009/01/adding-syntax-highlighting-to-blogger.html
http://yacoding.blogspot.com/2008/05/how-to-add-syntax-highlight-to-blogger.html
http://abhisanoujam.blogspot.com/2008/12/blogger-syntax-highlighting.html

like image 34
mensch Avatar answered Mar 01 '23 02:03

mensch