One of the challenges I faced as a beginner trying to give other web developers a helping hand was, showing my code to them in a nice, clean manner. It hindered the growth of my first blog. How
do you feel when you see sample code displayed to you with number formatting that can even be referenced? Cool right?! In this short tutorial, I'll be showing you how you can actually do something of such on your blog. Be it blogger or wordpress. Let's get the ball rolling.
STEP #1
Between the
<head>and
</head>section of your blog, copy and paste the line of code below.
<script src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js" type="text/javascript">
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shLegacy.js' type='text/javascript'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/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>
STEP #2
Always enclose the code you intend to display or show to your users within this preformatted text
<pre class="brush: ruby" name="code"># Your Ruby Code</pre>
You can find a collection of Brushes here. Also, there are different themes that you can choose to suit your style. You can arrive at that nice style of showing your code just by following the two steps above. Let's relate if you have any challenge or any word of encouragement. Thank you.
0 comments:
Post a Comment