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>

Posted in : Blog
Tags: , , ,

1 Comment to “How to format source code in your blog”

Add Comments (+)

  1. Evstafiev says:

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

Leave a Reply