Friday, September 12, 2008

How to format source code in your blog

When I was writing my post Include Guard: #pragma once vs. #ifndef #define #endif, I searched from Internet and tried at least 5 WordPress plug-in to insert formatted source code. But none of them works well for me. Some can not support C++ source code, some insert complicated html code to my post. Finally I found syntax highlighting is simply and easy to prettify my code. There is WordPress plug-in Google Syntax Highlighter for WordPress, and convenient for WordPress users to integrate to your WordPress blog site. The plug-in author may be wrong here, because the true Google Code highlight tool is Google Code Prettify.
SyntaxHighlighter is a pure JavaScript based tool and can parse a lot of programming languages:
  • C++ (cpp, c, c++)
  • C# (c#, c-sharp, csharp)
  • CSS (css)
  • Delphi (delphi, pascal)
  • Java (java)
  • Java Script (js, jscript, javascript)
  • PHP (php)
  • Python (py, python)
  • Ruby (rb, ruby, rails, ror)
  • Sql (sql)
  • VB (vb, vb.net)
  • XML/HTML (xml, html, xhtml, xslt)
To learn format your source code use this tool, please refer to the usage from http://code.google.com/p/syntaxhighlighter/wiki/Usage. This post demonstrated the result of SyntaxHighlighter so you can make a quick decision. I used the code from Microsoft MSDN http://msdn.microsoft.com/en-us/library/w5c4hyx3(VS.80).aspx as the sample code for testing.
1. Default usage:
<pre name="code" class="cpp"> ... code here ... </pre>
Result:
// Exhibits polymorphism/virtual functions.

#include 
#include 
#define TRUE = 1
using namespace std;

class dog
{
public:
 // Source Code Omitted...

private:
   string _dogSize, _earType;
   int _legs;
   bool _bark;

};

class breed : public dog
{
public:
 /*
 Source Code Omitted...
 */
};

int main()
{
   dog mongrel;
   breed labrador("yellow", "large");
   mongrel.setEars("pointy");
   labrador.setEars("long", "floppy");
   cout << "Cody is a " << labrador.getColor() << " labrador" << endl;
}


2. Display no gutter:


<pre name="code" class="cpp:nogutter"> ... code here ... </pre>


Result:


// Exhibits polymorphism/virtual functions.

#include 
#include 
#define TRUE = 1
using namespace std;

class dog
{
public:
 // Source Code Omitted...

private:
   string _dogSize, _earType;
   int _legs;
   bool _bark;

};

class breed : public dog
{
public:
 /*
 Source Code Omitted...
 */
};

int main()
{
   dog mongrel;
   breed labrador("yellow", "large");
   mongrel.setEars("pointy");
   labrador.setEars("long", "floppy");
   cout << "Cody is a " << labrador.getColor() << " labrador" << endl;
}


3. Display no controls at the top


<pre name="code" class="cpp:nocontrols"> ... code here ... </pre>


Result


// Exhibits polymorphism/virtual functions.

#include 
#include 
#define TRUE = 1
using namespace std;

class dog
{
public:
 // Source Code Omitted...

private:
   string _dogSize, _earType;
   int _legs;
   bool _bark;

};

class breed : public dog
{
public:
 /*
 Source Code Omitted...
 */
};

int main()
{
   dog mongrel;
   breed labrador("yellow", "large");
   mongrel.setEars("pointy");
   labrador.setEars("long", "floppy");
   cout << "Cody is a " << labrador.getColor() << " labrador" << endl;
}


4. Collapse the block by default


<pre name="code" class="cpp:collapse"> ... code here ... </pre>


Result


// Exhibits polymorphism/virtual functions.

#include 
#include 
#define TRUE = 1
using namespace std;

class dog
{
public:
 // Source Code Omitted...

private:
   string _dogSize, _earType;
   int _legs;
   bool _bark;

};

class breed : public dog
{
public:
 /*
 Source Code Omitted...
 */
};

int main()
{
   dog mongrel;
   breed labrador("yellow", "large");
   mongrel.setEars("pointy");
   labrador.setEars("long", "floppy");
   cout << "Cody is a " << labrador.getColor() << " labrador" << endl;
}


5. Begin line count at value. Default value is 1


<pre name="code" class="cpp:firstline[123]"> ... code here ... </pre>


Result


// Exhibits polymorphism/virtual functions.

#include 
#include 
#define TRUE = 1
using namespace std;

class dog
{
public:
 // Source Code Omitted...

private:
   string _dogSize, _earType;
   int _legs;
   bool _bark;

};

class breed : public dog
{
public:
 /*
 Source Code Omitted...
 */
};

int main()
{
   dog mongrel;
   breed labrador("yellow", "large");
   mongrel.setEars("pointy");
   labrador.setEars("long", "floppy");
   cout << "Cody is a " << labrador.getColor() << " labrador" << endl;
}


6. Show row columns in the first line.


<pre name="code" class="cpp:showcolumns"> ... code here ... </pre>


Result


// Exhibits polymorphism/virtual functions.

#include 
#include 
#define TRUE = 1
using namespace std;

class dog
{
public:
 // Source Code Omitted...

private:
   string _dogSize, _earType;
   int _legs;
   bool _bark;

};

class breed : public dog
{
public:
 /*
 Source Code Omitted...
 */
};

int main()
{
   dog mongrel;
   breed labrador("yellow", "large");
   mongrel.setEars("pointy");
   labrador.setEars("long", "floppy");
   cout << "Cody is a " << labrador.getColor() << " labrador" << endl;
}





If you are using WordPress plug-in, please be sure to remove redundant JavaScript files in your plug-in source code and speed up the page loading. Go to WordPress dashboard, Plugins -> Plugin Editor, select "Google Syntax Highlighter for WordPress", go to the bottom of the source code, I removed the similar lines to the line below and kept this line to highlight CPP code:


<script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushCpp.js"></script>

2 comments:

  1. In the article a huge thank you all for the cause, a lot of people are using

    ReplyDelete
  2. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a .Net developer learn from Dot Net Training in Chennai. or learn thru Dot Net Training in Chennai. Nowadays Dot Net has tons of job opportunities on various vertical industry.
    or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry.

    ReplyDelete