Arduino Code Syntax Highlighting Plugin for your WordPress Blog

Ever since I published the first lines of Arduino code on this site I was not satisfied with the way it looked. I’ve been using various IDEs (Integrated Development Environment) and advanced text editors for programming for a very long time and have gotten quite used to the software marking various important parts of my programs with different colors and bold fonts. Indeed, Arduino’s own IDE does exact same thing although I have to admit I would love to change the way it marks things a little bit, whenever I get time for it. Nevertheless, Arduino IDE’s color-marked up code is very useful and makes for an easier read, especially for someone not familiar with its specialized functions such as digitalWrite() and such.
It this kind of color markup that I wanted for the code posted on this site. Enter SyntaxHighlighter Evolved WordPress plugin

Thanks to Alex ( AKA Viper007Bond ) who wrote this plugin, which itself is based on the SyntaxHighlighter JavaScript package by Alex Gorbatchev, I’ve found an easy way to mark Arduino code I post here. Adding a custom piece of code to the plugin (called “brush”) required writing yet another mini-plugin for WordPress but Alex provided ample instructions for adding a new brush and here is what came out of my efforts:

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”