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>

1 comment:

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

    ReplyDelete