This blog server as a tutorial for me to highlight some code syntax in blogger.com, but I believe you guys may also find it helpfull.
First you have to download SyntaxHighlighter from Syntax Highlighter ver.1.5.1 for version 1.5.1 or
SyntaxHighlighter ver.3.0.83 for version 3.0.83 (the current, as of this blog written). I used to use version 1.5.1 then I change it to version 3.0.83.
Upload a couple of needed file into some hosting sites. I chose google sites, and created a dummy website to hold the needed files.
The needed files are :
- shCore.css (from styles folder)
- shThemeDefault.css (from styles folder)
- shCore.js (from scripts folder)
- shBrushVb.js (from scripts folder)
- shBrushPlain.js (from scripts folder)
You may notice that there are a couple of brushes included in the syntaxhighlighter_3.0.83.rar (scripts folder), I only uploaded shBrushVb.js and shBrushPlain.js since currently I only needed to share some VBScript and some plain text to the world.
Once you uploaded add the following syntax to your blogging template.
<Head> <link href='https://sites.google.com/site/techrevisit/shCore.css' rel='stylesheet' type='text/css'/> <link href='https://sites.google.com/site/techrevisit/shThemeDefault.css' rel='stylesheet' type='text/css'/> <script language='javascript' src='https://sites.google.com/site/techrevisit/shCore.js'/> <script language='javascript' src='https://sites.google.com/site/techrevisit/shBrushVb.js'/> <script language='javascript' src='https://sites.google.com/site/techrevisit/shBrushPlain.js'/> ... </Head>
Just BEFORE the </body> tag
<Body> ... <script type="text/javascript"> SyntaxHighlighter.all() </script> </Body>
How to use:
Now once we are done with the template, everytime you post a code you add a <pre> tag before the code. In blogger.com's posting HTML mode :
<pre class="brush :vb"> ... code ... </pre>
References :
Alex Gorbatchev's Syntax Highlighter
