GWcode SyntaxHighlighter

http://gwcode.com/assets/img/add-ons/tn/gwcode-syntaxhighlighter.gif

This ExpressionEngine 2.x extension adds the ability to highlight code with SyntaxHighlighter from within Wygwam (which is based on CKEditor). To make this possible, we use the (slightly modified) CKEditor SyntaxHighlighter plugin. I've also created an ExpressionEngine brush, so you will be able to highlight EE code.

The extension is as simple as it gets. It uses the wygwam_config hook to add a SyntaxHighlighter button to your Wygwam toolbar. The hook became available in Wygwam 2.0.1, so that's the minimum required version of Wygwam that you need to have installed to get this working.

This is the what the output will look like:

{exp:channel:entries channel="news" limit="1"}
	<h1>{title}</h1>
	<p>Some HTML code</p>

	{exp:pluginname param="value"}{variable-wrapped-in-plugin}{/exp:pluginname}
	<div id="divid">Some more HTML code</div>
{/exp:channel:entries}

As you can see, the ExpressionEngine code is being highlighted nicely and the HTML code as well. All colors can be changed with CSS easily.

After enabling the extension and adding a setting to your Wygwam configuration, this new button will be added to the toolbar:

GWcode SyntaxHighlighter screenshot 1

Clicking the button will show the following dialog window, where you will be able to add the code and select various settings:

GWcode SyntaxHighlighter screenshot 2