- Write content peole like
- Make sure it's readable (grammar/content wise)
- Make sure it looks pretty
As im a bit of a coder I really find it helps to see code which is easy to read.
So if im going to be putting code on this blog then I need something to make my code look slightly presentable.
There are a few options out there(I will create a list at some point), but to me the easiest is the SyntaxHighlighter by Alex Gorbatchev.
Reasons:
- It supports multiple programming languages
- It can be hosted by Alex's site
- It has a Blogger Mode
Updated 21st July 2008 - You may have noticed that the pages are now using version 2 of SntaxHighligher. I'm just in the middle of a blog entry on how to migrate over from 1.5.1
How to enable SyntaxHighlighter 1.5.1 in Blogger
- First we need to alter your Blogger Layout to add the required Javascript and CSS files. Goto Layout-->Edit HTML to edit your layout.
- Insert the CSS into the styles section of the Template. For some reason having a link element didn't work in Blogger. So I hard copied the code into the template style section, I pasted it after the template style before the ]]>
- Insert the relevant JS files into the <head> element. I'm pointing to Google's site.
- There is also a section of code that you need to add as startup script. This goes after the <body>tag.
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
This piece of code tells the highligher that it should highlight all elements with the 'name' attribute = 'code'. Also, notice the Blogger Mode!? What this does it a bit of manipulation of the source to replace <br/> with /n... simples. - How to add code to your blog entry.
Now comes the 'simple' bit, to add code to your place it within a <pre> element. For example:
I had some issues when entering certain html tags such as <link> into my <pre> tags. I therefore encoded the HTML to ensure that this wouldn't cause any issues.
<pre name="code" class="vb">
For index As Integer = 1 To 10
'do something
Next
</pre>
Once you have added these lines then the SyntaxHighlighter will highlight any code that you embedd in <pre> tags. Clever.
You can also just highlight certain classes, which is useful if you want to possibly NOT highlight certain <pre> elements.
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>
See what i did there...using the syntaxhighlighter to show how to install the syntaxhighlighter ;o)
That's All Folks
No comments:
Post a Comment