Category Archives: WordPress

Custom Brush for SyntaxHighlighter Evolved

Okay, before I get started let me just say that I realize there are several already set-up plugins for the WordPress Plugin, SyntaxHighlighter Evolved to include a brush for the *.batch language.  Also, there is a great article by the Plugin’s author that will guide you through developing a brush.  The reason I am posting mine is to pass a long a few things that went unsaid for the less experienced WordPress Plugin developer, but let me just say that this was much easier both in the plugin development and brush development than I thought it would be.  The reason I made my own brush, it’s just more fun to make my own!

Now, that being said, here we go!   My post for “Violating IT Policy” included a batch script for Cygwin to be portable.  since there was no brush in SyntaxHighlighter Evolved To develop a brush, you will need to set-up a new plugin for word press.  The plugin will be adopted by SyntaxHighlighter Evolved as you will see in a moment.  The structure for this plugin will be:

<root folder>/wp-content/plugins/
                        /plugins/<javascript brush>.js
                        /plugins/<php plugin>.php

For the javascript brush, this does have some tricky elements. but I’ve commented what I’m doing below.

/** shBrushBatch.js **/
/* Declare a new brush with SyntaxHighlighter.brushes.<your name for the brush> */
SyntaxHighlighter.brushes.Batch = function()
{
	/* Declare words that you need highlighted */
	var variable = 'clear cls goto set';
	var constants = 'if or';

	/* This is the heart of your brush, you can use the *.
	/* SyntaxHighlighter.regexLib.* brushes when applicapble. */
	this.regexList = [
		/* You may notice that my comments are looking for a css that does not match. */
		/* I'll explain below the script. */
		// comments
		{ regex: /(^::|rem).*$/gmi,                             css: 'string'},
		// stings
		{ regex: SyntaxHighlighter.regexLib.doubleQuotedString, css: 'comments'},
		{ regex: SyntaxHighlighter.regexLib.singleQuotedString, css: 'comments'},
		{ regex: /echo.*$/gmi,                                  css: 'keyword'},
		// variables
		{ regex: /%w+\1/gmi,                                    css: 'keyword'},
		{ regex: /%\*|%%?~?[fdpnxsatz]*[0-9a-z]\b/gmi,          css: 'keyword'},
		// clear cls keywords
		{ regex: new RegExp(this.getKeywords(variable), 'gmi'), css: 'variable'},
		// if and key words
		{ regex: new RegExp(this.getKeywords(constants), 'gmi'),css: 'constants'},
		// labels
		{ regex: /^:.+$/gmi,                                    css: 'script'}
	];
};

/* Create the highlighter object. */
SyntaxHighlighter.brushes.Batch.prototype = new SyntaxHighlighter.Highlighter();
/* Set the Aliases */
SyntaxHighlighter.brushes.Batch.aliases = ['bat','batch'];

So the reason that my css does not match the actual of what it is would be because the theme does not match my preference.  I perfer comments to be green, so since the string for the RDark format is green, I had to assing my comments to the string.  This was pretty confusing but the way I figured out my color scheme was simple enough.  In <root>/wp-content/plugins/syntaxhighlighter/styles/ you will find all of the css files to coordinate with the theme.  Half way down, you will see “Actual Syntax Highlighter Colors” and it is at this point that you will want to see what all of your options are.  Rather than converting #5CE63B to green, I went and made a sample script once my plugin was complete, I then went and set up a color tester like this, in place of my normal brush file:

/** shBrushBatch.js  - color test version **/
SyntaxHighlighter.brushes.Batch = function()
{
	/* 	set your wordpress to:
			1
			string
			comments
			... continue until the last keyword ...
			color3
			1 I dropped the correct closing in the example for formatting. */
	var string = 'string';
	var comments = 'comments';
	// ... continue to the last keyword ...
	var keyword = 'color3';

	this.regexList = [
		{ regex: new RegExp(this.getKeywords(string), 'gmi'), 	 css: 'string'},
		{ regex: new RegExp(this.getKeywords(comments), 'gmi'),  css: 'comments'},
		// ... continue to the last keyword ...
		{ regex: new RegExp(this.getKeywords(color3), 'gmi'), 	 css: 'color3'}
	];
};

SyntaxHighlighter.brushes.Batch.prototype = new SyntaxHighlighter.Highlighter();
SyntaxHighlighter.brushes.Batch.aliases = ['bat','batch'];

After doing this and seeing the colors, I could then associate which color I wanted for which sets of syntax.

Now, onto making the plugin work.  Obviously, you’ll need both of these files to have any results.  What this does is when you activate this plugin (yes, it does show in your plugins) then SyntaxHighlighter adopts it.  This script is pretty standard from what I saw online and is almost exactly out of the author’s blog post.  The comments at the front are what will appear in your WordPress under Plugins.  I’ve kept the comments mostly the same as the author, as he is describing it better than I could.

<?php
/*
Plugin Name: Batch Brush - SyntaxHighlighter Evolved
Descriptionn:  Adds support for the Batch language to SyntaxHighlighter Evolved.
Author: Zachary D. Skelton
Version: 1.0.2
Author URI: http://www.skeltonnetworks.com/
*/

// SyntaxHighlighter doesn't do anything until early in the "init" hook.
add_action('init','syntaxhighlighter_batch_regscript');

// Tell SyntaxHighlighter about this new brush.
add_filter('syntaxhighlighter_brushes','syntaxhighlighter_batch_addlang');

// Register the brush with WordPress.
function syntaxhighlighter_batch_regscript() {
	wp_register_script('syntaxhighlighter-brush-batch',
		plugins_url('shBrushBatch.js',__FILE__),
		array('syntaxhighlighter-core'),'1.0.2');
	}
// Add alternative names for your brush.
function syntaxhighlighter_batch_addlang($brushes) {
	$brushes['batch'] = 'batch';
	$brushes['bat'] = 'batch';

	return $brushes;
	}
?>

At this point you should be able to load your page.  If it cannot find the brush (you’ll get a dialog to let you know), you could replace plugins_url() in line 19 with a string of a direct path to the file, but there should be no need for it.  The most common reason for this is an error in your javascript brush, so make sure to check that before going to insane.  After this is all done, you may have problems seeing the results.  It took me 5 loads of the correct format before I saw the change, in that case, deactivate the plugin, clear the cache, change the plugin version number in line 6 and re-activate the plugin.  Should not need all of that but some browsers are fussy, and that takes care of any problem with the cache. As I said before, this is well documented and relatively easy to make.  You can see that I made my plugin only apply to my script but it would be easy to add more things to it.  I used a lot of my regex directly from this plugin because that is a skill I’m still working on.  But this was surprisingly simple, and you can find lots of good information on making plugins of your own.  It is surprisingly not too tough!