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?
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>
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With