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 (dead link). 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.
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:
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.php
file (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:
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.
Pingback: ???????? » My SyntaxHighlighter 2.0 Haskell Brush
Pingback: Wordpress SyntaxHighlighter Plugin Additional Languages « folios
I added file shBrushMathematica.js and syntaxhighlighter-MathematicaBrush.php
in
/wp-content/plugins/myplugin/
shBrushMathematica.js reads
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.
Pingback: Donovan's Blog » FileMaker Syntax Highlighting
Pingback: Custom Brush for SyntaxHighlighter Evolved | Skelton Networks: Programming
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
Pingback: www.hans-eric.com » D Brush For SyntaxHighlighter
Pingback: lingtech : Syntax highlighting in WordPress
Pingback: WordPress plugin extension: SyntaxHighlighter Evolved – D Brush « sociomantic labs
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
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
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.Pingback: Progress / OpenEdge / ABL Syntax Highlighting for HTML & Wordpress | Abe's Blog
Pingback: ????????????????SyntaxHighlighter? | SanRin?
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
Pingback: | Sys Admin Extraordinaire | » Blog Archive » Test SyntaxHighlighter
Pingback: ?SyntaxHighlighter????? | QuarterGeek
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
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.Pingback: Creating brushes for Syntax Highlighter | Alauda Project
I appreciate the effort to make this plug-in expandable, but these instructions are really really hard to follow for regular WP admins.
Pingback: SyntaxHighlighter Evolved PHP5 « « Sandro Bilbeisi
Pingback: Golang Brush for SyntaxHighlighter Evolved | El Pingüinario de Luis Iván
Pingback: Salesforce Apex & VisualForce Syntax Highlighter for Wordpress
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/
Pingback: Arduino Code Syntax Highlighting Plugin for your WordPress Blog
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!
Pingback: SyntaxHighlighter??Brush?????DOS ???????? | ???????????
For some reason, I’m not getting any syntax highlight nor any sort of errors. Any thoughts?
Plugin Code:
Actual brush:
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
Pingback: Unable to perform Translation:Quota Exceeded. Please see http://code.google.com/apis/language/translate/overview.html - CyberMaster
Thank you Alex. I followed your instructions to write a custom plugin for shBrushBat.js and it works perfectly.
Pingback: Adding a new brush to the SyntaxHighlighter Evolved plugin | http://blog.hashbangweb.com
Pingback: Wordpress – Syntax Highlighter – Add Custom Brush(es) | Me Like Dev
Pingback: Adding a new brush to the SyntaxHighlighter Evolved plugin | noseyparka.me.uk
Pingback: SyntaxHighlighter Evolved Biferno | Best Plugins - wordpress – widgets – plugin 2012
Pingback: ??????? » SyntaxHighlighter Evolved?Haskell????
Pingback: SyntaxHighlighter Evolved PHP5 | Best Plugins - wordpress – widgets – plugin 2012
Pingback: SyntaxHighlighter Evolved | It??????????
Pingback: TypeScript Syntax Highlighting for Wordpress « Ian Obermiller
Pingback: DynStatic – Wordpress RouterOS Syntax Highlighting
Pingback: Add SyntaxHighlighter Evolved Plugin Third Party Brushes To Your WordPress Installation - it.megocollector.com
Pingback: SyntaxHighlighter Evolved ? lisp ??????? | CuP ????
Pingback: SyntaxHighlighter Evolved : D Brush « azurenote
Pingback: SyntaxHighlighter????????? | Crescent
Pingback: SyntaxHighlighter Evolved | Tidy Repo
Hi Alex,
I could use a little help. I keep getting the SyntaxHighlighter message:
Can’t find brush for: gms
wp-content/plugins/gms-brush contains only:
gms-brush.php
shBrushGMS.js
gms-brush.php:
After seven hours of staring, poking and probing I’m at wits end.
Thank you very much for any help.
Kelly