Tech Revisit: Code Syntax Highlighting

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.

Installation:
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.

Just after the <Head> Tag

<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

2 comments:

Meutia Halida KhairaniNovember 21, 2010 at 8:55 PM
uhh sir, i never experience this thing..
but now you can add some scroll bar to the post..

does it named scroll bar?huehehee
UnknownNovember 22, 2010 at 9:21 AM
This is for syntax highlighting Mut. So when you insert sample code, people can read it easier. Sample code can be distinguish into VB, java, and others. :D If you read my other post (the one with vbscript for essbase add-ins, you might see some syntax highlighting - coloring in some text). As for the one on this page, I used plain syntax so there isn't any coloring given to the HTML codes.

Friday, November 19, 2010

Code Syntax Highlighting

2 comments: