Use WP-Syntax To Beautify Your Code Display

First Posted on November 18, 2008

Have you ever admired the way some authors display WordPress code snippets in their articles? I have, and I’ve just discovered a WordPress plugin that will help me with my code displays, too: WP-Syntax.

Code that is to be formatted by WP-Syntax is bracketed with “<pre lang="LANGUAGE" line="1">” and “</pre>” tags. The “line” parameter is optional. “LANGUAGE” is replaced by one of the many code types supported by GeSHi - Generic Syntax Highlighter.

Here is the method I will normally be using to present my code snippets:

  • Select the HTML tab in the tinymce editor in order to use HTML coding,
  • Paste the code I want to display from a basic text editor to the HTML code window, and
  • For CSS code, as an example, bracket the code with <pre lang="css"> and </pre>.

Below is a sample block of CSS code. I have shown the “pre” tags as I used them before and after the code.

<pre lang=”css”>

/* Begin Typography & Colors */
body {
	font-size: 62.5%; /* Resets 1em to 10px */
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	background: #d5d6d7 url('images/kubrickbgcolor.jpg');
	color: #333;
	text-align: center;
	}
#page {
	background-color: white;
	border: 1px solid #959596;
	text-align: left;
	}
#header {
	background: #73a0c5 url('images/kubrickheader.jpg') no-repeat bottom center;
	}

</pre>

WP-Syntax can help you present more attractive and usable code displays in your own articles, tips, and tutorials.