Archive

Posts Tagged ‘highlighter’

Display Code in WordPress Posts using Syntax Highlighter Evolved

October 28th, 2010 139 comments

There are times when you might want to show a piece of code within a WordPress post. If you try to put the code snippet directly into the editor you’ll find that WordPress doesn’t exactly display how you’d like it to.  The problem is that WordPress will assume that the code is intended to be read as code and not plain text so the readers can view it properly.

The easiest way to combat this issue is to use a plugin so that when you past code in your post WordPress knows not to see the code as code but as text.  One plugin that i have found is called SyntaxHighlighter Evolved, written by viper007bond, which is based on the original project by Alex Gorbatchev.

For a list of supported languages see the WordPress.com support document.

Using the plugin

Whenever you want to display code you will need to wrap your snippet with the shortcode tags of the corresponding language.

1
1
1

There are also several options available that you can use in your shortcode to tweak the display. The list of tweaks can be seen at the bottom of the Syntax Highlighter Options page.  If you wanted to highlight lines 4 and 12 of your php code you could do the following:

1

Sample output:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>PHP Code Example</title>
</head>
<body>
	<h1>PHP Code Example</h1>

	<p><?php echo 'Hello World!'; ?></p>

	<p>This line is highlighted.</p>

	<div>
		This	is	an
		example	of	smart
		tabs.
	</div>

	<p><a href="http://wordpress.org/">WordPress</a></p>
</body>
</html>
Categories: General, Programming Tags: , , ,