Notes On Installing SyntaxHighlighter (WordPress Plugin for Highlighting Code) and Custom Brushes

2010-12-30 Updated

2010-12-29 Initial post

I just installed the SyntaxHighlighter Evolved 3.1.1 plugin today and am testing it out.

I finally got around to looking into how to put syntax highlighted/formatted code blocks into my posts and eventually found SyntaxHighlighter. It seems to be the most popular plugin of its type, so I installed it. Even the WordPress documentation refers to it in the section on Posting Source Code. Installing this plugin was easy--just like any other plugin that I've installed.

But adding custom/third-party brushes (each brush highlights a specific computer language) took some work. You'd think that adding a brush would be as simple as downloading it to a location and clicking on a button to activate it, but apparently SyntaxHighlighter has not evolved (pun intended) to that point. Now that I know how to add a brush, it's easy to do, but you'd think that installing the brush should be easier than installing the actual plugin.

SyntaxHighlighter didn't come with a brush for batch files, so I found one here. It's the one named Batch (shBrushBat.js). I couldn't find any instructions for how to install that brush, so I wrote my own below. So a few hours later than I had expected, I got everything working and documented everything here. I could have just used the "text" tag for batch files, but of course, I had to take the long way and install this brush; you never learn anything doing things the easy way, so it was a good learning experience.

The SyntaxHighlighter author himself does have some general instructions for adding brushes, but I found these other general instructions a bit easier to follow.

Anyway, in a nutshell, here's how I installed Batch (shBrushBat.js), using these general instructions as reference:

1. Upload the file shBrushBat.js to wp-content/plugins/syntaxhighlighter/third-party-brushes/.
2. Edit the file syntaxhighlighter.php in wp-content/plugins/syntaxhighlighter/ (this can be done from within the WordPress plugin editor).
3. Find the the sections in that file begining with these two comments: // Register some popular third-party brushes and // Create list of brush aliases and map them to their real brushes.
4. Under // Register some popular third-party brushes, add this code to the bottom of that section:

wp_register_script( 'syntaxhighlighter-brush-bat', plugins_url('syntaxhighlighter/third-party-brushes/shBrushBat.js'), array('syntaxhighlighter-core'), '20101229');
// Note that '20101229' is the date that I added this brush. That number can be used for the version number, but this brush itself doesn't have a version number.
//  Per,
//   it's "an arbitrary version number that you should change if you modify the file (to break browser caches)."

5. Under // Create list of brush aliases and map them to their real brushes, add this code to the bottom of that section:

'bat'           => 'bat',
'batch'         => 'bat',
'cmd'           => 'bat',

I've done a few tests below after setting everything up. Note that you can put the SyntaxHighlighter tags directly in a post while editing the post in Visual mode--you don't need to be in HTML mode.

I've noticed some weirdness where regular text near the code block gets changed to "preformatted" and I have to go back and change it to "paragraph." I'm not sure why that happens. It also looks like SyntaxHighlighter puts preformatted text into a box (either that or some other update/plugin did that because I never noticed it before in the posts where I have preformatted text).

It looks like SyntaxHighlighter uses client-side JavaScript to format the code blocks. This became obvious when I went to the plugin author's site and some of the code blocks didn't render correctly right away and sometimes I had to refresh the page (I'm using Firefox 3.6.12).

>> Here's a batch file (highlighted as "batch," which requires this brush: shBrushBat.js):

REM -r    Restart the computer
REM -f     Forces running applications to close without warning
REM  -t nn    Set timeout for shutdown to nn seconds
ECHO ********************************************************************
ECHO ********************************************************************
ECHO **** This will RESTART the computer. ****
ECHO **** To cancel, close the window by clicking on the X in the upper right corner. ****
ECHO **** To continue and reboot, press any key. ****
ECHO ********************************************************************
ECHO ********************************************************************
shutdown -r -f -t 3

>> Here's a VBS script (highlighted as "vb"):

Option Explicit
Dim objFSO, objFolderSrc1, objFolderDst1
Set objFSO = CreateObject("Scripting.FileSystemObject")
Set objFolderSrc1 = objFSO.GetFolder("X:\P-Data")
Set objFolderDst1 = objFSO.GetFolder("Y:\Backup-P-Data")
Wscript.Echo "P-Data SRC: " & objFolderSrc1.Size & vbCRLF & "P-Data DST: " & objFolderDst1.Size
Set objFSO = Nothing
Set objFolderSrc1 = Nothing
Set objFolderDst1 = Nothing

>> Here's a PowerShell script (highlighted as "powershell"):

Add-PSSnapin VMware.VimAutomation.Core
$VMwareServer = "vmware-01"
$VMwareUser = "root"
$VMwarePassword = "P@ssw0rd"
Connect-VIServer -Server $VMwareServer -Protocol https -User $VMwareUser -Password $VMwarePassword
Write-Host "**** Press any key to continue. ****"
$x = $host.UI.RawUI.ReadKey("NoEcho,IncludeKeyDown")

3 Responses to “Notes On Installing SyntaxHighlighter (WordPress Plugin for Highlighting Code) and Custom Brushes”

  1. Abel Braaksma Says:

    Oddly, your batch-example shown here only shows as normal black-on-white text. Is your batch-plugin broken? The other code examples (VB and PowerShell) work as expected.

    If you placed the brush in the same directory as the SyntaxHighlighter plugin, any update to that plugin will have erased your own additions (an update of SH Evolved first empties the plugin directory).

  2. SysAdmin-E Says:

    Abel: Thanks for checking out my site. That batch plug-in used to work. I last updated the post on 2010-12-30 and have updated WordPress a few times since then. I will have to investigate the issue when I have some time. Take care, SysAdmin-E.

  3. Add SyntaxHighlighter Evolved Plugin Third Party Brushes To Your WordPress Installation - Says:

    [...] Adding A New Brush (Language) << Regex | Programming Thoughts [...]

Leave a Reply