Arduino Code Syntax Highlighting Plugin for your WordPress Blog

Arduino Brush for SyntaxHighlighter Plugin - sample of output

Download SyntaxHighlighter Evolved: Arduino Brush

Basically, the idea behind this Arduino code markup plugin was to be able to create Web pages very similar to the look and feel of the standard Arduino IDE – same colors at the very least. I have to admit, I took some small liberties with copying the markup and added bolding and colors for some elements that I thought deserved it but didn’t get any in Arduino IDE. Direct port manipulation functions (PORTD, DDRD etc.) are one such example. Otherwise I hope the code looks and feels just like you’re still editing it in Arduino IDE 🙂

INSTALLATION INSTRUCTIONS

1. This plugin depends on the main SyntaxHighlighter Evolved plugin. Please download and install the plugin according to the author’s instructions.
2. Unzip content of the Arduino Brush archive into a temporary directory, then upload content of that directory (syntaxhighlighter-arduino) to your WordPress plugins folder (usually wp-content/plugins/).
3. Open Plugins in your WordPress Dashboard and activate both ‘SyntaxHighlighter Evolved’ and ‘SyntaxHighlighter Evolved: Arduino Brush’ plugins
4. Go to the main plugin’s ‘SyntaxHighlighter Evolved’ Settings and in the “Color Theme” Select “Arduino”. No other changes from defaults are necessary. Save the new settings.

USAGE

1. Use only in HTML mode of the WordPress Editor
2. Wrap the piece of Arduino code you want to highlight in

   [code lang="arduino"]   [/code]

3. If you don’t want the line numbers on the left, use an additional parameter in the [code] tag:

   [code lang="arduino" light="true"]   [/code]

EXAMPLE

	[code lang="arduino"]
	int digit_common_pins[]={8,9,10}; // This is my code, non-working sample
        int ledForwardState = LOW; 
        PORTD = digits[digits_array[z]];
        digitalWrite(digit_common_pins[z], HIGH);  
	[/code]

would render like

int digit_common_pins[]={8,9,10}; // This is my code, non-working sample
int ledForwardState = LOW; 
PORTD = digits[digits_array[z]];
digitalWrite(digit_common_pins[z], HIGH);  
	

and

	[code lang="arduino" light="true"]
	int digit_common_pins[]={8,9,10}; // This is my code, non-working sample
        int ledForwardState = LOW; 
        PORTD = digits[digits_array[z]];
        digitalWrite(digit_common_pins[z], HIGH);  
	[/code]

would render like

int digit_common_pins[]={8,9,10}; // This is my code, non-working sample
int ledForwardState = LOW; 
PORTD = digits[digits_array[z]];
digitalWrite(digit_common_pins[z], HIGH);  
	

If you wanted to highlight lines 2 and 3 for example, add highlight=”2,3″

	[code lang="arduino" highlight="2,3"]
	int digit_common_pins[]={8,9,10}; // This is my code, non-working sample
        int ledForwardState = LOW; 
        PORTD = digits[digits_array[z]];
        digitalWrite(digit_common_pins[z], HIGH);  
	[/code]

would render like

int digit_common_pins[]={8,9,10}; // This is my code, non-working sample
int ledForwardState = LOW; 
PORTD = digits[digits_array[z]];
digitalWrite(digit_common_pins[z], HIGH);  
	

For more complicated and real world examples of Arduino code marked up with this plugin, please see my earlier posts: Arduino Nano and HP5082-7433 vintage 7-segment LED display or Driving a Bipolar Stepper Motor with Arduino and ULN2803AG

Special thanks to Darius of electronicsblog.net who’s usage of SyntaxHighlighter inspired me to write this plugin.

Please leave any question or comment about this plugin in the comments section below.

Thanks for stopping by and happy coding!

8 Responses to “Arduino Code Syntax Highlighting Plugin for your WordPress Blog”