While SyntaxHighlighter Evolved comes bundled with brushes (the “plugins” that add support for specific languages) for most of the popular programming languages, there still may be a language that isn’t supported but that you need.
You’ll want to start by checking out this awesome blog post. It has a list of a ton of third part brushes and links to download them. If your language isn’t supported, then check out the official documentation for how to write your own brush (it’s really simple).
Once you have your brush that you want to add to my plugin, you’ll need to throw together a tiny little plugin of your own that will tell my plugin about the new brush so that it can be used.
We start by registering the Javascript file with WordPress (note we’re registering it, not enqueueing it as my plugin will do that itself if it’s needed):
wp_register_script( 'syntaxhighlighter-brush-language', plugins_url( 'shBrushLanguage.js', __FILE__ ), array('syntaxhighlighter-core'), '1.2.3' );
wp_register_script() takes the same parameters as wp_enqueue_script().
Some notes on the parameters:
- This needs to be in this syntax:
syntaxhighlighter-brush-some-unique-language-stub - This is the URL to the brush file. It’s filename and location don’t matter (I would advise not storing it in my plugin’s folder as it will be deleted when upgrading my plugin). I’d recommend using the cool
plugins_url()function (unofficial documentation). - The brush requires the core SyntaxHighlighter file, so list it as a dependency.
- An arbitrary version number that you should change if you modify the file (to break browser caches).
Okay, so now that the brush file is registered with WordPress, we need to tell SyntaxHighlighter about the new brush and what language aliases it can be used for. To do this, we use the “syntaxhighlighter_brushes” filter, like so:
add_filter( 'syntaxhighlighter_brushes', 'a_unique_function_name_of_your_choosing' );
function a_unique_function_name_of_your_choosing( $brushes ) {
$brushes['alias1'] = 'language';
$brushes['alias2'] = 'language';
return $brushes;
}
- “alias1″ and “alias2″ are some example aliases. These will be available directly as shortcodes or as valid parameters for the “language” attribute of my plugin’s shortcode.
- “language” is the stub that you used above when registering the brush with WordPress.
Activate the plugin and you’ll be good to go!
Overall Example
Assuming you have a brush file called “shBrushFoobar.js” for the language “foobar” and that brush file is in the same folder as the plugin, here’s what the plugin could look like:
<?php
/*
Plugin Name: SyntaxHighlighter Evolved: Foobar Brush
Description: Adds support for the Foobar language to the SyntaxHighlighter Evolved plugin.
Author: Your Name Here
Version: 1.0.0
Author URI: http://yourblog.com/
*/
// SyntaxHighlighter Evolved doesn't do anything until early in the "init" hook, so best to wait until after that
add_action( 'init', 'syntaxhighlighter_foobar_regscript' );
// Tell SyntaxHighlighter Evolved about this new language/brush
add_filter( 'syntaxhighlighter_brushes', 'syntaxhighlighter_foobar_addlang' );
// Register the brush file with WordPress
function syntaxhighlighter_foobar_regscript() {
wp_register_script( 'syntaxhighlighter-brush-foobar', plugins_url( 'shBrushFoobar.js', __FILE__ ), array('syntaxhighlighter-core'), '1.2.3' );
}
// Filter SyntaxHighlighter Evolved's language array
function syntaxhighlighter_foobar_addlang( $brushes ) {
$brushes['foobar'] = 'foobar';
$brushes['fb'] = 'foobar';
return $brushes;
}
?>
You can then use it like this:
[foobar]your code here[/foobar]
Or like this:
1
Where do we “registering the Javascript file with WordPress”? What file?
I ended up editing the syntaxhighlighter.php file, and I have my custom brush running. But will this change be blown away on the next upgrade? Where should I be adding my custom languages so that they aren’t over written by upgrade?
-Thanks
Yes, that will be deleted when you upgrade.
The code needs to go into a plugin (see the “Overall Example” above) or into your theme’s
functions.phpfile (the first is better). My plugin’s entire folder will be deleted upon upgrade, so don’t put the plugin file in that folder either.Very cool. I stopped reading the tutorial when I was blocked on the first step.
I guess it’s a writing style thing. The “Overall Example” was pretty good. You might want to add that people should make a Folder in their Plug-in directory and give them an example install name “syntaxhighlighter-fooBrush.php”.
It’s running nicely now.
I tried adding a custom Haskell brush. And it looks to have worked to some extend. The wordpress side of the story functions. But on loading a page with an Haskell code block I receive a notice that the haskell brush can’t be located. It’s being loaded (checked with FireBug). Maybe there is something wrong with it?:
http://alessandrovermeulen.me/wp-content/plugins/syntaxhighlighter-extras/shBrushHaskell.js
That brush hasn’t been properly updated for the new version of SyntaxHighlighter (2.x).
Check out this diff as an example of how the Obj-C brush was updated:
--- C:/Users/Alex/Desktop/old.js Fri Dec 18 21:58:14 2009 +++ C:/Users/Alex/Desktop/new.js Fri Dec 18 21:58:24 2009 @@ -14,7 +14,7 @@ * */ -dp.sh.Brushes.ObjC = function() { +SyntaxHighlighter.brushes.ObjC = function() { var datatypes = 'char bool BOOL double float int long short id void'; @@ -31,13 +31,13 @@ keywords += 'using uuid virtual volatile whcar_t while'; this.regexList = [ - { regex: dp.sh.RegexLib.SingleLineCComments, css: 'comment' }, // one line comments - { regex: dp.sh.RegexLib.MultiLineCComments, css: 'comment' }, // multiline comments - { regex: dp.sh.RegexLib.DoubleQuotedString, css: 'string' }, // double quoted strings - { regex: dp.sh.RegexLib.SingleQuotedString, css: 'string' }, // single quoted strings + { regex: SyntaxHighlighter.regexLib.singleLineCComments, css: 'comment' }, // one line comments + { regex: SyntaxHighlighter.regexLib.multiLineCComments, css: 'comment' }, // multiline comments + { regex: SyntaxHighlighter.regexLib.doubleQuotedString, css: 'string' }, // double quoted strings + { regex: SyntaxHighlighter.regexLib.singleQuotedString, css: 'string' }, // single quoted strings { regex: new RegExp('^ *#.*', 'gm'), css: 'preprocessor' }, // preprocessor - { regex: new RegExp(this.GetKeywords(datatypes), 'gm'), css: 'datatypes' }, // datatypes - { regex: new RegExp(this.GetKeywords(keywords), 'gm'), css: 'keyword' }, // keyword + { regex: new RegExp(this.getKeywords(datatypes), 'gm'), css: 'datatypes' }, // datatypes + { regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' }, // keyword { regex: new RegExp('\\bNS\\w+\\b', 'g'), css: 'keyword' }, // keyword { regex: new RegExp('@\\w+\\b', 'g'), css: 'keyword' }, // keyword { regex: new RegExp('@"(?:\\.|(\\\\\\")|[^\\""\\n])*"', 'g'), css: 'string' } // objc string @@ -45,5 +45,5 @@ } -dp.sh.Brushes.ObjC.prototype = new dp.sh.Highlighter(); -dp.sh.Brushes.ObjC.Aliases = ['objc', 'obj-c']; \ No newline at end of file +SyntaxHighlighter.brushes.ObjC.prototype = new SyntaxHighlighter.Highlighter(); +SyntaxHighlighter.brushes.ObjC.aliases = ['objc', 'obj-c'];Basically you gotta get rid of all of the
dp.sh.stuff.Thanks. I got it to work.
I’ll release it in a wordpress plugin somewhere this week.
I added file shBrushMathematica.js and syntaxhighlighter-MathematicaBrush.php
in
/wp-content/plugins/myplugin/
shBrushMathematica.js reads
SyntaxHighlighter.brushes.Mathematica = function() { var funcs = 'Plot Map NumericQ NumberQ'; var keywords = 'foo'; var operators = '+ - /'; this.regexList = [ { regex: /--(.*)$/gm, css: 'comments' }, { regex: SyntaxHighlighter.regexLib.multiLineDoubleQuotedString, css: 'string' }//, //{ regex: new RegExp(this.getKeywords(funcs), 'gmi'), css: 'blue' }, //{ regex: new RegExp(this.getKeywords(operators), 'gmi'), css: 'green' }, //{ regex: new RegExp(this.getKeywords(keywords), 'gmi'), css: 'keyword' } ]; }; SyntaxHighlighter.brushes.Mathematica.prototype = new SyntaxHighlighter.Highlighter(); SyntaxHighlighter.brushes.Mathematica.aliases = ['mathematica', 'mma'];syntaxhighlighter-MathematicaBrush.php reads
But it is still not showing correctly:
http://i49.tinypic.com/125gkdv.png
mma: You forgot to rename the function that adds the aliases. It’s still “syntaxhighlighter_foobar_addlang” while you registered “syntaxhighlighter_mathematica_addlang” as the callback.
Hi
I wrote a plugin for AppleScript but I have one problem – the custom stylesheet isn’t being loaded. I’m trying like this:
wp_register_style( ‘syntaxhighlighter-theme-applescript’, plugins_url( ‘shThemeAppleScript.css’, __FILE__ ), array(‘syntaxhighlighter-core’), ’1.0′ );
Which does not work.
When I enqueue the file though:
wp_enqueue_style( ‘syntaxhighlighter-theme-applescript’, plugins_url( ‘shThemeAppleScript.css’, __FILE__ ), array(‘syntaxhighlighter-core’), ’1.0′ );
Then it works like a charm.
I’m pretty new to WordPress – can someone tell me off hand why the registered stylesheet isn’t being loaded?
I assume you mean you wrote a highlighter (brush) that parses the AppleScript language and need a stylesheet to go along with it? If so, you don’t want “syntaxhighlighter-theme-foobar”. That’s for global color themes (to better match the design of your blog).
Have your plugin register it’s brush (see top of page) and then also do
wp_enqueue_style()(enqueue registers it and also enqueues it).wp_register_style()is for when you want to tell WordPress about a stylesheet but not necessarily output it.Further reading:
http://codex.wordpress.org/Function_Reference/wp_register_style
http://codex.wordpress.org/Function_Reference/wp_enqueue_style
Thanks for your reply Viper.
I did use wp_enqueue_style as stated in my post. But then the stylesheet is loaded on every page of my blog, instead of the few that actually have AppleScript in them. I figured there must be a way to only load the stylesheet when it’s needed, in the same way the javascript is only loaded when it’s needed.
No, that’s not easily possible.
My plugin does it by waiting until the footer to output the Javascript as by then all posts have been outputted and it knows what scripts are needed. It also uses Javascript to inject a stylesheet into the head (the only valid place for CSS) which is pretty hackish. There’s no easy way for your plugin to do the same thing without writing a bunch of code.
Yeah I saw that JavaScript bit the other day. I was wondering why it was done like that.
Well then, wp_enqueue_style() will have to do, thanks for your help and the plugin.
Cheers
Thanks for the plugin. A bit roundabout, but got there in the end.
Worth nothing that if you put the code in a file called syntaxhighlighter-foobar.php in a folder called syntaxhighlighter-foobar (i.e, plugins/syntaxhighlighter-foobar/syntaxhighlighter-foobar.php ) and you do what you suggest in the example
wp_register_script( 'syntaxhighlighter-brush-foobar', plugins_url( 'shBrushFoobar.js', __FILE__ ), array('syntaxhighlighter-core'), '1.2.3' );then you need to create a folder ANOTHER folder called syntaxhighlighter-foobar put your javascript brush in there (i.e., plugins/syntaxhighlighter-foobar/syntaxhighlighter-foobar/shBrushFoobar.js). It’s all a bit confusing.
I think it’s easier leaving the brush in plugins/syntaxhighlighter-foobar/shBrushFoobar.js and changing the syntaxhighlighter_foobar_regscript function to
wp_register_script( 'syntaxhighlighter-brush-foobar', plugins_url( syntaxhighlighter-foobar/shBrushFoobar.js' ), array('syntaxhighlighter-core'), '1.2.3' );That’s gotta be a WordPress bug of some type.
plugins_url( 'shBrushFoobar.js', __FILE__ )should work out to be/plugins/syntaxhighlighter-foobar/shBrushFoobar.js. I do this in tons of my plugins and have never had any issues doing so.Dear Alex,
Thanks for the nice job you have done. I used your code for an assembly language brush plugin. It works perfectly and you can see it in action here : http://www.chlankboot.com/blog/asm-brush
Now, I’m submitting it to wordpress.org to allow the asm community using it, but frankly I wish if you could add that brush (available on that same mentioned page) to the next version of the SyntaxHighlighter Evolved plugin as I have no time to maintain mine.
Greetz
I am trying to install applesript and I need help reconciling these instructions to those on this site. Will someone help me with the script?!?!?
Where should I install the three items provided?
http://davidchambersdesign.com/applescript-syntax-highlighting/
1. Download SyntaxHighlighter, and follow the setup instructions.
2.Download AppleScript brush (?7.8?kB), and upload it to your SyntaxHighlighter scripts directory.
3.Download AppleScript theme (?4.4?kB), and upload it to your SyntaxHighlighter styles directory.
4.Download background image (154?bytes), and upload it to your SyntaxHighlighter styles directory.
5.Include the brush like so:
Thanks for the time.
Soo … I added this to file name syntaxhighlighter-brush-applescript.php
<?php /* Plugin Name: SyntaxHighlighter Evolved: AppleScript Brush Description: Adds support for the AppleScript language to the SyntaxHighlighter Evolved plugin. Author: john Version: 1.0.0 */ // SyntaxHighlighter Evolved doesn't do anything until early in the "init" hook, so best to wait until after that add_action( 'init', 'syntaxhighlighter_applescript_regscript' ); // Tell SyntaxHighlighter Evolved about this new language/brush add_filter( 'syntaxhighlighter_brushes', 'syntaxhighlighter_applescript_addlang' ); // Register the brush file with WordPress function syntaxhighlighter_applescript_regscript() { wp_register_script( 'syntaxhighlighter-brush-applescript', plugins_url( 'shBrushAppleScript.js', __FILE__ ), array('syntaxhighlighter-core'), '1.2.3' ); } // Filter SyntaxHighlighter Evolved's language array function syntaxhighlighter_foobar_addlang( $brushes ) { $brushes['applescript'] = 'applescript'; $brushes['as'] = 'applescript'; return $brushes; } ?>I then uploaded shBrushAppleScript.js and syntaxhighlighter-brush-applescript.php to plugins/mine/. Code from shBrushAppleScript.js is
I then get the following error across the top of the screen :
Warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, ‘syntaxhighlighter_applescript_addlang’ was given in /homepages/xx/xxxxxxxxxx/htdocs/xxxxxxx/wp-includes/plugin.php on line 166
Any thoughts?
Rename
syntaxhighlighter_foobar_addlang()tosyntaxhighlighter_applescript_addlang(). The function you’re trying to call doesn’t exist in your current code.I appreciate the effort to make this plug-in expandable, but these instructions are really really hard to follow for regular WP admins.
Thanks Eric! I was able to put a brush plugin together to highlight the Salesforce apex & visualforce syntax. If anyone is interested the post is here: http://www.anthonyvictorio.com/salesforce/syntax-highlighter/
The instructions are a bit easier to follow if you look at the general logic of WordPress plugins, the way you register scripts and themes. I agree, it’s probably a bit difficult if you jump straight into it without prior JS, CSS and PHP programming experience. But if you have at least some knowledge of these three, there’s enough information on this page alone (both the post and the comments) to get a pretty good idea about how this works.
I also needed a custom brush and a custom theme for my project and was able to do both. My plugin is for highlighting Arduino code in listings of the Arduino IDE sketches. It’s published here http://elabz.com/arduino-syntaxhighlighter/ and hope it will be available on WordPress.org soon, too. You’re more than welcome to peek inside and adapt to your own syntax if you like.
Alex, before I go I wanted to mention that pretty much none of your links to alexgorbatchev.com work. There must have been some serious site restructuring and the URLs have changed. The proper page for the custom brush documentation is here: http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/custom.html
Cheers!
For some reason, I’m not getting any syntax highlight nor any sort of errors. Any thoughts?
Plugin Code:
Actual brush:
SyntaxHighlighter.brushes.sas = function() { var keywords = 'proc run by data'; }; SyntaxHighlighter.brushes.sas.prototype = new SyntaxHighlighter.Highlighter(); SyntaxHighlighter.brushes.sas.aliases = ['SAS', '.sas', 'sas'];shBrushSAS.js is inside the syntaxhighlter-sas directory with the .php file.
Hmm, looks correct. You’re sure the plugin is activated? When you use
[sas], does it transform into a<pre>tag on your blog like it should?The page source looks like this:
proc sort data = sample;
by variable;
run;
It highlights Bash and some of the other syntaxes fine if I use those brushes. It’s just not finding the proc, sort or run to highlight for some reason.
I left the code bracket off the above comment, it looks like
Thank you Alex. I followed your instructions to write a custom plugin for shBrushBat.js and it works perfectly.