Show Formatted Source Code with Syntax Highlight

Posted September 14th, 2008 in Blog by Mason

LibG Code Viewer is a free web tool to view source code with syntax highlight.

After I finished my post How to format source code in your blog, I decided to make a small tool for anyone who post source code file on Internet. I called this tool “LibG Code Viewer“, it used the method I described in my previous blog. Here is the usage of this tool:

http://libg.org/code.php?lang=your source language&url=link to your source code

Below is the list of supported language and sample:

Language Parameter Sample
C++ cpp http://libg.org/code.php?lang=cpp&url=http://libg.org/code/sample.cpp
C# csharp http://libg.org/code.php?lang=csharp&url=http://libg.org/code/sample.cs
CSS css http://libg.org/code.php?lang=css&url=http://libg.org/code/sample.css
Delphi delphi http://libg.org/code.php?lang=delphi&url=http://libg.org/code/sample.pas
Java java http://libg.org/code.php?lang=java&url=http://libg.org/code/sample.java
Java Script js http://libg.org/code.php?lang=js&url=http://libg.org/code/sample.js
PHP php http://libg.org/code.php?lang=php&url=http://libg.org/code/sample.phpcode
Python py http://libg.org/code.php?lang=py&url=http://libg.org/code/sample.py
Ruby ruby http://libg.org/code.php?lang=ruby&url=http://libg.org/code/sample.rb
Sql sql http://libg.org/code.php?lang=sql&url=http://libg.org/code/sample.sql
VB vb http://libg.org/code.php?lang=vb&url=http://libg.org/code/sample.vb
XML/HTML xml http://libg.org/code.php?lang=xml&url=http://libg.org/code/sample.xml

You can use the form below to test LibG Code Viewer:

Language:
Source Code Link:

How to format source code in your blog

Posted September 11th, 2008 in Blog by Mason

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>