Syntax Highlighter Evolved Arduino / Wiring Brush Plugin

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”