Syntax Highlighted Source Code in WordPress

Adding syntax highlighted source code in WordPress doesn’t come without a plugin.  WordPress by nature strips out any potentially dangerous code in the posts and pages, protecting you from yourself.   There are two very good plugins to accomplish this.  1) SyntaxHighlighter2 and 2) Dean’s Code Highlighter.  Both are good.

I prefer the first, but there are some problems with it when using some themes in WordPress and the current theme I have installed is one of them.  To post source code with this plugin in WordPress, you place your code between the [sourcecode language="php"] [/sourcecode] tags.

The 2nd almost always works and I’m using it in this theme now.  Using Dean’s Code Highlighter I can place my source code between the <pre lang=”PHP”> </pre> tags in my WordPress HTML editor and preserve code formatting and have intelligent syntax highlighting, based on GeSHi.

“Delphi” Sample:

  1. for (x := 0 to 100) do begin
  2. end;

“PHP” Sample:

  1. for ($x= 0; $x= 100; $x++) {
  2. }

“JavaScript” Sample:

  1. for(i = 0; i < 5; i++){
  2. }

“CSS” Sample:

  1. body {
  2. background-color: Black;
  3. }

“XML” Sample:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <urlset xmlns="http://www.google.com/schemas/sitemap/0.84">
  3.         <url>
  4.                 <loc>http://webjestic.net/</loc>
  5.                 <changefreq>weekly</changefreq>
  6.                 <priority>0.5</priority>
  7.         </url>
  8. </urlset>

“XHTML” Sample:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
  3. <head profile="http://gmpg.org/xfn/11">
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. </head>
  6. <body>
  7. </body>
  8. </html>

For a complete listing of all the supported languages, visit GeSHi.

Leave a Reply