Arduino Code Syntax Highlighting Plugin for your WordPress Blog

Arduino Code Syntax Highlighting Plugin for your WordPress Blog

Arduino Brush for SyntaxHighlighter Plugin - sample of output

Arduino Brush for SyntaxHighlighter Plugin - sample of output

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!

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

  • Thank you very much!!! Works Great.
    Im using PHP 5, so I had to change the ‘<?' tag for '<?php' tag at the beginning of syntaxhighlighter-brush-arduino.php

    • Hi Guillermo, thanks for stopping by! I’m glad you were able to use it! The PHP opening tag (<? vs. <?php ) actually has to do with your Web server rather than the PHP version. But you are right, I should keep in mind that not everyone uses Apache for their Web server. <?php is more widely accepted.

      Thanks again!

  • [...] Code here is  formatted by  using Arduino Code Syntax Highlighting Plugin. [...]

  • Thanks for this great brush, it’s make code very nice !

  • [...] Brush by: Elabz.com [...]

  • I realise that this post is quite old now and may not be monitored but just in case: I am wondering if it is possible to use this Arduino Code Syntax Highlighting Plugin in normal html markup and if so how would I implement it please. I did use on my site when I was using WordPress but now I have moved to a self coded site and the “copy as html” function in the Arduino IDE uses a lot of non breaking spaces and whilst it renders very well I am just after a more elegant solution. Thanks Pedro

    • Thanks for stopping by, Peter.

      Sure you can deploy the Syntax Highlighting javascript in a plain HTML file. It’s just an adaptation of an open source library from here: http://alexgorbatchev.com/SyntaxHighlighter/ to WordPress. I just wrote a little addition that implements highlighting of Arduino-specific (or, more generally, Wiring-specific, because Arduino IDE is based on Wiring). It’s basically a custom CSS file (and making sure your JS is calling that file)

      You are more than welcome to grab that additional part from my site – open the source of any page and find the part that deals with custom CSS – search for http://elabz.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shCore.css?ver=3.0.83c and copy/paste what you need to your own site (static HTML or template other than WP – just be sure to follow the syntax conventions of the platform you end up using)

      I haven’t done that myself yet but it looks totally doable.

      Ironically, I am a bit tired of WordPress myself and looking around for an alternative blogging platform, but I do like Syntax Highlighter, so I may very well be trying to do what you’re attempting now at some point in the future myself.

      Good luck!

      Oh, one other thing: if you successfully deploy it in a static HTML, please drop me a link, I would love to see how it worked

Leave a Reply

Or use the Forums ! If your comment is a question, please consider posting it to a matching section of our Electronics Forums. The forums allow for a more natural conversation flow, especially if multiple replies are required. Additionally, you'll be able to style your writing (bold font, italics etc.) and post images which can help with a good answer.

Notify me of followup comments via e-mail. You can also subscribe without commenting.

Tools

Coming soon ...

Recent Comments
  • admin: I think you are correct, LinuxCNC should be able to control it using a more widely available CNC servo...
  • Kunkmiester: Do you know what kind of encoders the motors use? Gecko and others make servo drivers, so if the encoder...
  • admin: Hello Dani, thanks for checking in. No, in this particular case the common wire should be left unconnected....
  • Dani: Your code worked well on my salvaged spindle motor, thanks for sharing!! By the way, I found other spindle...
  • rufz: did you take out that bulky rectangular lens?
  • Andreas Carmblad: Hi. I have some problems getting this to work. Can you help me? The code looks like this and all...
  • Andreas Carmblad: Hi again I’m trying to make this work. I have soldered everything together and I have...
  • Dovale: Hi I assamblled the system with Mercury stepper motor . The motor rotates but no response from the switches....
  • sam: sir i cant trace the Positive and negative of that LD. can u help me please??
  • Chanceleir: Hello and thanks for the detailed expalnation Actually I am trying to install energia on my 64 bit Ubunto...
Meta