IndoGuides

Thursday, May 7, 2009

Highlight Code Syntax on Website Using SyntaxHighlighter

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" />

Wednesday, April 29, 2009

Convert Std String to Integer in C++

In C++ there are no methods/functions to convert std string to integer. But, by using C standard library (cstdlib or stdlib.h) we can convert char* (C string) to integer using atoi function. We can also convert string to char* (C string) using c_str function in string class. Thus, we can convert string to integer via char*. This is the function (I call as stoi) and the example:

#include <iostream>
#include <cstdlib>

using namespace std;

int stoi(string _str) {
 return atoi(_str.c_str());
}

int main() {
 string current_year = "2009";
 string birth_year = "1987";
 int age = stoi(current_year) - stoi(birth_year);
 cout << "Age = " << age << " years old" << endl;
 
 return 0;
}

Output:

Age = 22 years old

Monday, April 20, 2009

Show Yahoo! Messenger Status On Website

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: