IndoGuides: website

SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript. The latest version (May 7, 2009) is version 2.0 (maintenance release 2.0.320 released at May 3, 2009). It is licensed under LGPL 3, but you encouraged to donate to the developer since it's a donationware.

Before using it, you can view the demo here.

Here, the guides how to use SyntaxHighlighter.

Download the archived package here
Extract the archived package

Example, extract in directory named "sh". So, in this directory, there are 3 directories (scripts, src, and styles) and 2 files (LGPLv3.txt and test.html). You may look at the test.html for quick tutorial.

In <head> tag, insert/link the CSS files of SyntaxHighlighter core and theme

   <link type="text/css" rel="stylesheet" href="sh/styles/shCore.css" />
   <link type="text/css" rel="stylesheet" href="sh/styles/shThemeDefault.css" />

Still in <head> tag, insert/link the JavaScript files of SyntaxHighlighter core and all brushes you want to use

   <script type="text/javascript" src="sh/scripts/shCore.js" />
   <script type="text/javascript" src="sh/scripts/shBrushBash.js" />
   <script type="text/javascript" src="sh/scripts/shBrushCpp.js" />
   <script type="text/javascript" src="sh/scripts/shBrushPlain.js" />
   <script type="text/javascript" src="sh/scripts/shBrushXml.js" />

You can view all brushes you can use here.

Still in <head> tag, call SyntaxHighlighter.all()

   <script type='text/javascript'>
    SyntaxHighlighter.all();
   </script>

Add code blocks

All codes you want to highlight must be located in <pre> tag with specially formatted class attribute. The value of class atttribute is the parameters to edit the styles/looks of code block. There is only one required parameter, brush, while the others are optional (see configuration). The brush parameter must be set to one of the brush aliases that you have loaded prior. It is the simple example:
```
   <pre class="brush: html;">
    <a href="http://indoguides.blogspot.com">IndoGuides</a>
   </pre>
  
```
Because browsers will interpret the text after bracket "<" as XML tags, in the code blocks you must replace all of character of < and > with html special character associated with (which start by character of &).

For you who don't have place for hosting the SyntaxHighlighter package, you may use the hosted version. Just change the link of CSS and JavaScript files to http://alexgorbatchev.com/pub/sh/[VERSION] like so:

 <link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css" />

This code contains 2 main parts. First, an image to show the status (<img> tag). And the second, a hyperlink to chat with the account (<a> tag). There are 2 method of chat. Using Yahoo! Messenger client program (desktop version) or using Yahoo! Webmessenger (web version). This is the basic code:

Desktop Version
Preview:

Code (to copy it, click the view source icon):
```
<a href="ymsgr:sendim?YAHOO-ID"><img src="http://opi.yahoo.com/online?u=YAHOO-ID&m=g&t=2" border="0" /></a>
```
NOTE: don't forget to replace the YAHOO-ID with your Yahoo! ID.

Web Version
Preview:

Code (to copy it, click the view source icon):

<a href="http://messenger.yahoo.com/edit/send/?.target=YAHOO-ID"><img src="http://opi.yahoo.com/online?u=YAHOO-ID&m=g&t=2" border="0" /></a>

NOTE: don't forget to replace the YAHOO-ID with your Yahoo! ID.

The image we can use not only the one appear at above. Absolutely, there are 25 images we can use. To change the image, just change the value of parameter t in the src of img code/tag. These are the values of t and the images associated with: