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.
[...] ?Guide??????????????Brush??????Haskell????????????shBrushHaskell.js?????????????????????wordpress?plugin????Adding A New Brush (Language)?????????????????SyntaxHighlighter Evolved?????shBrushHaskell.js???????????$plugin_dir/watashi-no-brushes???syntaxhighlighter.php????????? [...]
[...] How to add a brush to SyntaxHighlighter Plugin Tutorial VN:F [1.7.9_1023] please wait…Rating: 0.0/5 (0 votes cast) Filed under: .News Leave a comment Comments (0) Trackbacks (0) ( subscribe to comments on this post ) [...]
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.
[...] If you’re using your own installation from WordPress.org, you can access the advanced features of SyntaxHighlighter using a plug-in adaptation called SyntaxHighlighter Evolved. After installing the plug-in, you can add your custom brush by following these instructions. [...]
[...] language. Also, there is a great article by the Plugin’s author that will guide you through developing a brush. The reason I am posting mine is to pass a long a few things that went unsaid for the less [...]
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
[...] Following Viper’s advice I implemented the support as a tiny WordPress plugin. If you’re using SyntaxHighligher Evolved and want to be able to display syntax highlighted D code, feel free to download shBrushD from my new Shared Stuff page. [...]
[...] Evolved is updated, it needed to be constructed as its own dependent WordPress plugin. Fortunately, Viper007Bond left instructions on how to do this, and it is pretty [...]
[...] find D anywhere on this list so we decided to build the D Brush ourselves (Viper007Bond has a great how-to article regarding this topic). For the last month we’ve been ‘drinking our own champagne’ [...]
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.[...] a plugin extending Viper007Bond’s SyntaxHighlighter Evolved plugin. Kudos to him for his easy-to-follow guide, as I have zero experience with WordPress [...]
[...] SyntaxHighlighter Evolved???????????????????????????? [...]
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
[...] are instructions for adding brushes from the SyntaxHighlighter author himself, but I found these instructions a bit [...]
[...] ??SyntaxHighlighter Evolved????????????????? [...]
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.[...] information on adding new brushes can be found here: Adding A New Brush This entry was posted in Arduino, Highlighting code syntax and tagged plugin creation, syntax [...]
I appreciate the effort to make this plug-in expandable, but these instructions are really really hard to follow for regular WP admins.
[...] ?????? ???????? Home / Web Development / SyntaxHighlighter Evolved PHP5SyntaxHighlighter Evolved PHP5SyntaxHighlighter Evolved PHP5 adds support to the “SyntaxHighlighter Evolved” ( http://wordpress.org/extend/plugins/syntaxhighlighter/ ) plugin for the PHP5 language using the brush provided by David Chambers( http://davidchambersdesign.com ). It is based on the SyntaxHighlighter JavaScript package by Alex Gorbatchev ( http://alexgorbatchev.com/SyntaxHighlighter/ ). this plugin follows the programming conventions outlined by Alex Mills (Viper007) at : http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/adding-a-new-brush-language/ [...]
[...] to post Golang code in this blog without worrying about the syntax highlightenment, so I read http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/adding-a-new-brush-language and created a plugin that contains the Golang Brush created by Allister [...]
[...] Eric Santiago on his version of a Visualforce Syntax Highlighter for Typepad and a post by Alex on adding new brushes to Syntax Highlighter Evolved I was able to put together a WordPress plugin that works alongside the SyntaxHighlighter Evolved [...]
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/
[...] “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 [...]
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!
[...] ???Adding A New Brush (Language) [...]
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
[...] this plugin follows the programming conventions outlined by Alex Mills (Viper007) for extending his plugin: Adding A New Brush (Language) [...]
Thank you Alex. I followed your instructions to write a custom plugin for shBrushBat.js and it works perfectly.
[...] /wp-content/plugins/syntaxhighlighter/third-party-brushes/_readme.txt file directs you to Adding A New Brush (Language) page for further [...]