Use WP-Syntax To Beautify Your Code Display

Update 11/12/2012. I have found that the WP-Syntax adversely affects the dashboard loading of information screens so I no longer use the plugin. Instead, I format code display through CSS.

*******************************************************************************

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
• bracket the code with <pre> 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>

/* 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>