How to create Arduino brush for Syntax Highlighter

A wordpress plugin enhancement

For my Arduino lessons I needed to add WordPress support for Arduino syntax highlighting. A custom brush for SyntaxHighlighter plugin that would format and color my Arduino syntax similar to the application (see here an example). This is what I did.

Created a new plugin called ArduinoSyntax. First step was to add an action in init:

// SyntaxHighlighter Evolved doesn't do anything until early in the "init" hook, so best to wait until after that
add_action( 'init', 'syntaxhighlighter_foobar_regscript' );

Then I created a css file to style the code, I registered and enqueued the css file:

wp_register_style( 'shArduino.css', plugins_url( 'shArduino.css', __FILE__ ), false, '1.0.1' );
wp_enqueue_style( 'shArduino.css' );

Next step was to register JavaScripts for both Arduino and Processing languages:

wp_register_script( 'syntaxhighlighter-brush-arduino', plugins_url( 'shBrushArduino.js', __FILE__ ), array('syntaxhighlighter-core'), '1.2.3' );
wp_register_script( 'syntaxhighlighter-brush-processing', plugins_url( 'shBrushProcessing.js', __FILE__ ), array('syntaxhighlighter-core'), '1.2.3' );

The final step was to add a filter for both brushes:

add_filter( 'syntaxhighlighter_brushes', 'ala_add_arduino_sh' );

function ala_add_arduino_sh( $brushes ) {
    $brushes['arduino'] = 'arduino';
	$brushes['processing'] = 'processing';

    return $brushes;

Available plugin brushes can be found in link All Syntax Highlighter 2.0 brushes collected, described and downloadable.

Detailed information on adding new brushes can be found here: Adding A New Brush

Leave a Reply

Your email address will not be published. Required fields are marked *