I finally got around to making a custom plugin also called a “brush” for Syntax Highlighter that properly highlights the Arduino language called Wiring. I haven’t fully worked out the colors for the different themes but so far the colors I have chosen look nice with the Default theme and the Emacs theme.

I’m going to work on the colors more and make specific colors for each theme in the future. Check out the before and after pictures, the before is using standard C++ code and the after is using the custom wiring code.

Syntax Highlighter using C++ for Arduino Code

Syntax Highlighter using Wiring for Arduino Code

I couldn’t find solid instruction on how to install these brushes so I just figured out a way to make it work on my own and I like the way this works so I don’ t plan to change it. First download the shBrushWiring.js file that I have attached to this post.

shBrushWiring

Next upload the file to the “/wp-content/plugins/syntaxhighlighter/third-party-brushes/” folder.

Now we need to edit a few files, you can either do this directly in WordPress by going to Plugins and then the editor and choosing the files or you can download them via FTP and edit them in an editor which I think is the better way to go because you will get more predictable results.

First we need to edit the main php file called “syntaxhighlighter.php” it’s located in ”/wp-content/plugins/syntaxhighlighter/”
Find the line that reads  ”// Register some popular third-party brushes” and after the last entry add the following line

“wp_register_script( ‘syntaxhighlighter-brush-wiring’,     plugins_url(‘syntaxhighlighter/third-party-brushes/shBrushWiring.js’),           array(‘syntaxhighlighter-core’), ’20120503′     );”

Now find the line that reads “// Create list of brush aliases and map them to their real brushes” and in between “‘vbnet’         => ‘vb’,” And “‘xml’           => ‘xml’,” Add the following lines

‘arduino’ => ‘wiring’,
‘Arduino’ => ‘wiring’,
‘wiring’ => ‘wiring’,
‘Wiring’ => ‘wiring’,

Save, Close and upload the file if you downloaded it via FTP

Next we need to go into the “/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/” folder and edit the file which correlates to the theme you are using or you can edit all of the theme files which I recommend. The files we want to edit are the ones with THEME in the name, i.e. “shThemeDefault.css” At the end of the file we need to add the following lines. These lines control the colors so if you want to edit them you can do that here. If you think a specific word should be in a different category, i.e. function labeled as a keyword, just drop me a comment below and I will fix it.

.syntaxhighlighter .wirekeyword {
color: #ff5105 !important;
}
.syntaxhighlighter .wirefunction {
color: #ff5105 !important;
}
.syntaxhighlighter .wirefunctionb {
font-weight: bold !important;
color: #ff5105 !important;
}
.syntaxhighlighter .wirepinmode {
color: #1b79ff !important;
}
.syntaxhighlighter .wirecomment {
color: #8d8d8d !important;
}

Save, Close and upload the files if you downloaded them via FTP

That’s it your all done, to use the new code you can use the following example in your post, you must enclose these in brackets and follow them up with /code in brackets [].

code lang=”Arduino”
code lang=”Wiring”

1. Arduino – GettingStarted ~A Must ReadArduino Duemilanove I have always been into Electrical Engineering and in fact is what I originally started going to college for. I however already had tons of knowledge and experience in Network Administration so that is my real career. I recently decided to not give up on something I love...
2. Arduino Getting Started Pt.1So your ready to jump into the vastly complex world of electrical engineering. Weather you have a specific goal in mind or just think Microchips are cool in general I aim to assist you in your learning experience by posting several articles based around the Arduino platform. I will be...
3. Arduino – Advanced LED BlinkBy now you should have your Arduino and have gone through the Arduino Website and maybe you received some documentation with your board which describes the Electrical Engineering Hello World, The LED Blink Sketch. The LED Blink sketch gives you a rough idea of how you will send commands to...
4. Arduino – Interrupt Tutorial with LED & SwitchWell well well, Look who’s back for more already. If you’re pushing through these Arduino tutorials screaming give me more then I’d like to be the first to tell you good job and keep it up. Soon you will have this thing called the Arduino mastered and that creation that...
5. Arduino – Analog Read Potentiometer to Digital Out LED + Bonus Photoresistor to LEDThe analog to digital sketches have been covered a million ways from Sunday with every conceivable part but in order for us to move on to more complex circuits and concepts I need to be sure you know these simpler ones. This tutorial wont be quite as in depth as...