Release: [Wordpress Plugin] SyntaxHighlighter Plus
Latest version: v0.18 [2008-07-19]
As part of the ‘house-warming party’ (for the (re)launching of the website) gift, I now announce the immediate availability of SyntaxHighlighter Plus. :-)
The official Wordpress plugin page is located here: http://wordpress.org/extend/plugins/syntaxhighlighter-plus/
What is SyntaxHighlighter Plus?
SyntaxHighlighter Plus is a Wordpress plugin for code syntax highlighting. It is an enhanced version of the original SyntaxHighlighter by Matt, Viper007Bond and mdawaffe. Please give them a big applause for making such a great plugin!
Features of SyntaxHighlighter
SyntaxHighlighter allows you to easily post syntax highlighted code all without loosing it’s formatting or making an manual changes.
It supports the following languages (the alias for use in the post is listed next to the name):
- Bash — bash, sh
- C++ — cpp, c, c++
- C# — c#, c-sharp, csharp
- CSS — css
- Delphi — delphi, pascal
- Java — java
- JavaScript — js, jscript, javascript
- PHP — php
- Python — py, python
- Ruby — rb, ruby, rails, ror
- SQL — sql
- VB — vb, vb.net
- XML/HTML — xml, html, xhtml, xslt
This plugin uses the SyntaxHighlighter JavaScript package by Alex Gorbatchev.
What is the difference between SyntaxHighlighter and SyntaxHighlighter Plus?
SyntaxHighlighter Plus is built upon SyntaxHighlighter with extra features and bug fixes. In addition to the original version, SyntaxHighlighter Plus has the following extra goodies:
- Valid XHTML markup (courtesy of mhavila)
- Background expand fix (partially courtesy of brucknerite)
- Corrected Overflow issues
- More syntax variants
Is SyntaxHighlighter Plus backward compatible?
Yes! Simply replace the original SyntaxHighlighter files and that’s it! Start from version 0.13, the plugin folder was renamed to ’syntaxhighlighter-plus’.
How to install and use this plugin?
Please refer to SyntaxHighlighter’s project page.
Examples
PHP
function BBCodeToHTML( $content ) {
if ( !$this->CheckForBBCode( $content ) ) return $content;
$matches = $this->GetBBCode( $content );
if ( empty($matches) ) return $content; // No BBCode found, we can stop here
// Loop through each match and replace the BBCode with HTML
foreach ( (array) $matches as $match ) {
$language = strtolower( $match[4] );
$content = str_replace( $match[0], '<pre class="syntax-highlight:' . $language . "\">" . htmlspecialchars( $match[5] ) . "</pre>", $content );
$this->jsfiles2load[$this->languages[$language]] = TRUE;
}
return $content;
}
CSS
.dp-highlighter
{
font-family: "Consolas", "Courier New", Courier, mono;
font-size: 12px;
background-color: #E7E5DC;
width: 530px;
margin: 18px 0 18px 0;
padding-top: 1px;/* adds a little border on top when controls are hidden */
overflow: auto;
/* fixes for IE: "overflow: auto" causes unnecessary vertical bar */
/* corrects bottom scroll bar overlapping */
overflow-y: hidden;
padding-bottom: expression(this.scrollWidth > this.offsetWidth ? 15 : 0);
}
Syntax
Bold ones are exclusive to SyntaxHighlighter Plus. Furthermore, quotation marks around the language can be omitted.
- [source language=’css’] … [/source]
- [code language=’css’] … [/code]
- [sourcecode lang=’css’] … [/sourcecode]
- [source lang=’css’] … [/source]
- [code lang=’css’] … [/code]
- [sourcecode=’css’] … [/sourcecode]
- [source=’css’] … [/source]
- [code=’css’] … [/code]
- [lang=’css’] … [/lang]
- [css] … [/css]
License
GNU Lesser General Public License (LGPL)
Changelog
v0.18 [2008-07-19]
- Added PHP as the default language if no language is specified (e.g. [ code ][ /code ])
v0.17 [2008-06-28]
- Fixed a bug in the Bash highlighting code which caused conflicts between keywords and variables highlights
v0.16 [2008-06-02]
- Ported SyntaxHighlighter 1.1.1 changes: ‘Encode single quotes so wptexturize() doesn’t transform them into fancy quotes and screw up code.’
v0.15b [2008-05-07]
- CSS fixes for IE6
v0.15a [2008-05-07]
- Enhanced CSS
v0.15 [2008-05-01]
- Fixed the IE scroll bar issue (backup your CSS file before upgrade!)
v0.14 [2008-04-22]
- Added support for Bash (thanks to Nick Anderson)
- Now supports Wordpress MU (thanks to Tim)
v0.13 [2007-12-19]
- Changed plugin folder to ’syntaxhighlighter-plus’.
v0.12 [2007-12-18] - Broken!
- Appeared on the Wordpress plugins site.
- Fixed readme.txt.
- Cleaned up the files.
v0.11 [2007-12-16]
- Added more syntax variants.
v0.10 [2007-12-16]
- Initial release.
Download
v0.18 Wordpress Official Mirror
v0.17 Wordpress Official Mirror
v0.16 Wordpress Official Mirror
v0.15b Wordpress Official Mirror
v0.15a Wordpress Official Mirror
v0.15 Wordpress Official Mirror
v0.14 Wordpress Official Mirror
v0.13 Wordpress Official Mirror
v0.12 Wordpress Official Mirror
v0.11 Wordpress Official Mirror
v0.10 Wordpress Official Mirror
Hello Fred,
First off, thanks for updation, I hope this’ll work with WordPress 2.3.x. As, the original SyntaxHighlighter plugin didn’t worked for me.
Well, I’m using Amit’s IG-SyntaxHighlighter for the past 2+ years. And has alot of code, just wanna ask you, can you add an additional syntax variant:
[lang][/lang] e.g. [css] [/css]. This will help in migrating from ig-Syntax to SyntaxHighlighter without loosing previously saved codes.Expecting some response at the earliest possible.
DG…
Hi DG,
Interesting, because I used the original SyntaxHighlighter with 2.3.1 and it was fine. Perhaps you have some other plugins that conflict with it?
As for more variants, I’ll see what I can do. :)
Cheers
Hi Fred,
Thanks for the prompt reply. Eagerly waiting for your input on the requested variant.
2. I’ve notice your blog loading quite fast, even with lots of JS. Are you using any server side cache?
Also, very important, you plugins directory is open for public view, just disable it.
DG…
DG, I have updated the plugin, it now supports [lang] and [css],etc. :)
Regarding the loading speed, yes I’m using WP Super Cache.
In the next few days I’ll compose an overview of some of the ‘essential’ plugins.
Cheers
P.S. Thanks for the heads up on the directory security concern. :)
Hi Fred,
Thanks once again, just dowloaded upgraded version.
2. I saw Super Cache initially, Donnacha has done a fantastic work.
3. Re. essential plugins, I hope, you’ve your compilation, incase if you want, you can check this post of mine.
Thanks again for the help and prompt reply’s.
I’ll tag your post tomorrow on my blog.
DG…
You’re welcome DG. Wow you have a big list there, I’ll ’study’ it soon. :)
How do you do it with whitespace? Mine seems to be eaten by WordPress the whole time (everytime the post is saved). Is there any trick to this?
Adam, do you have any other plugins installed that may cause this? Some text formating plugins might trim the whitespaces.
LOL, good stuff ! Love reading your blogs.
Nope, nothing like that. Are you editing your posts in HTML or in the “WYSIWYG” editor?
Adam, I do all posts using the good ol’ raw, plain editor. ;) Never used the WYSIWYG editor, now that I think of it, it might be a cause if you use that in combination with the syntax highlither. I will do some tests later. :)
Admin I just tested it and unfortunately the WYSIWYG editor doesn’t like the plugin. There is no way around it I’m afraid…
Well, maybe I’ll just use that too. Never trusted the WYSIWIG editor completely anyway. It’s just that I always think that it’s a nice feature and I always try to use nice features naively hoping they make things better. And sometimes these features aren’t exactly what I need/want, as in this case.
Thanks for all the help!
really a great plugin. I do a change that the “files” folder to “shlfiles” for wordpress mu edition. because the “files” conflicts with the user-upload-file-folder in wordpress mu . please review my article http://tim.diary.tw/2008/03/05.....hter-plus/
please give some advise and merge to your version for wordpress mu version. thanks a lot!
Thanks Tim, I will merge this feature in the next few days. :)
you’re welcome, thanks for your reply and enhance this plugin…
Hi Fred,
can your plugin be used to highlight code posted in the comments?
@Claudio: Yes you certainly can! :) At around line 58 of syntaxhighlighter.php, you will see the following comment:
// Uncomment these next lines to allow commenters to post code
Just uncomment the three lines after that to allow syntax highlighting in comments! :)
Thanks Fred, this plugin is awesome!
really a great plugin.
Automatic newline ?
Any chances to make it work with 2.5?
Thanks!
Hi Moshu, did you find any particular function broken in 2.5? I am running 2.5 here and the plugin appears to be working fine.
v1.3,v1.4 still have problem on WP 2.5
it convert line break to “” text and it convert on each line……
for example:
http://blog.miawork.com/?p=654
@Ming: Did you use the WYSIWYG editor? If so that is the reason why it converts line breaks, there is currently no workaround unfortunately.
Re: Fred Wu
Yes, i using the WYSIWYG editor come with WordPress.
@Ming: Unfortunately WYSIWYG messes up the syntax highlighter code, your only option is to switch to the plain editor for the time being.
Hello,
Thanks for your great plugin. I’ve been using it for months. Now the syntax on my blog shows twice when I use this plugin, but it’s normal without [lang]. I just find this probelm and it may caused by the compatibility with WP 2.5. I had no probelms before.
Thx
@Greenmoon55: I cannot reproduce the problem. Are you saying that the code will appear twice if you use the [lang=php] format?
I use [lang='pascal'][/lang]. It looks like this: http://greenmoon55.cn/blog/broken-necklace/
I guess that it’s not caused by [lang='pascal'][/lang]. I tried to use [code] format but problem was not solved.
Sorry for my English. I’m learning English now. Thx.
@Greenmoon55: It works fine here, could you please provide me a list of your activated plugins? Maybe one of your plugins is interfering with it.
I use common plugins. I tried to deactive all and keep this one actived, nothing changed. I’ve updated to 0.15.
@Greenmoon55: I just re-analysed your page source and noticed that the SyntaxHighlighter Javascript has been inserted twice.
Search for ‘SyntaxHighlighter Stuff’ in your HTML source and you’ll see what I mean. Please double check your templates to make sure that only one instance of the script is included.
Thanks for your help. I changed to another theme, then it has no problem. But I don’t know why. I don’t want to change the theme.
Could you tell me more about how to find the problem in the theme files?
I suspect the SyntaxHighlighter scripts are somehow hard coded into your theme. If that’s the case then please search and remove it. Otherwise you could email me the theme files to canglan [AT] gmail.com and I’ll take a look at it for you. Cheers
I’m having a bit of trouble with the syntax highlighter; it works great, except comments have a large, visible box around each line. See the code near the bottom of http://www.coriolinus.net/2008.....thats-why/ . I suspect that this is due to a CSS conflict, but I’m new to Wordpress and I have no idea how to begin debugging this.
I have some problems with your highlighter code, I am running WP 2.5, and using Mandigo theme. I have installed the latest version of you app, but the output looks funny:
http://www.xipher.dk/WordPress/?page_id=170
It seems to indent some lines, and not others.
I have tried switching to the Wordpress default 1.6, but it still has issues, do you have an idea what could be happening here ?
Claus, the page you linked is empty.
Sorry I had accidently marked it as private, and FF had kept my login credentials… So I could see it…
It should work now, and sorry for the trouble :)
Claus and coriolinus, please upgrade to version 0.15b, it should fix both of your CSS problems.
Thank you for your quick reply.
It seems to have fixed most of the problems.. Now every other line of code is indented.
http://www.xipher.dk/WordPress/?p=168
PS I know it is “unsupported” code (PowerShell), but that should not cause the problem should it ?
Claus: I’ve fixed this in SVN trunk. You may get the file directly at: http://svn.wp-plugins.org/synt.....ighter.css
Thank you, that’s fixed it. Good plugin!
Thank you very much it works now :)
I’ve send the theme files to you. Thank you.
Problem solved. Thx for your help.
I am trying to post some actionscript code that contains what wordpress thinks are invalid XHTML. I have tried to work around this by replacing the angle brackets with entity references but they don’t render correctly. What is the solution for using entity references within SyntaxHighlighter?
Brett, would you mind posting a link or some samples here?
Since I update to wp v2.5.1, my highlighter broke, among other things. Installed your plugin and for some reason the js isn’t loading, so I end up with the tags printing on screen. I’m kinda desperate, because all the highlighter plugins I’ve tried so far don’t seem to work.
link: redivide.com[...]vhost
Using [lang=’xml’]…
Hi, Thanks for this wonderful plugin, however I am experiencing one tiny error. The output print double if , as you can see in http://tajidyakub.com/2008/06/.....n-the-fly/ , but if we copy to clipboard the double if disappeared. I wonder where it went wrong?, I use sourcecode lang bash and bash /bash, same thing happen. Thanks again.
Hi Tajid, I have updated the script to 0.17 which should fix this problem. Please give it a try. :)
Hi Fred, Thanks for the update, it works .. :)
Anyone has the problem where the spaces/tabs gets “eaten” up? I am loosing all my indentations. I typed in spaces but after hitting “Save”, the spaces gets “eaten”.
Hi Fred,
We talked during the inital release of Syntaxhighlighter Plus. May I request you add a Syntax
[code]..some code..[/code], because I’ve lots of codes wrapped in the above noted syntax variant during my “IG-SyntaxHighlighter” usage, now those code are broken.Hope for an early reply.
Thanks,
DG…
not work for me :(
http://toplez.textdriven.com/?p=3
thx.. it work now :)
Excuse me, I have to trouble you again.
I’ve just changed a new theme but found that the first line of my code isn’t shown correctly while the other lines work well.
Can I send you my theme and you help me? This theme author is popular in China. He has made many good themes. Many people use this one.
Thank you!
For example http://greenmoon55.cn/blog/the-castle/
Luckily, this is not a serious problem like last time.
thank you ^_^
i have problem with Arabic language - right to left language -
and the code appear in right to left
see here
http://www.islamcg.com/blender/?p=65
@Derick: What version of Wordpress and SyntaxHighlighter Plus are you using? And are you using the WYSIWYG editor?
@DG: This feature is now included in 0.18. :)
@Greenmoon55: In your main CSS file, the definition of .comment is conflicting with the SyntaxHighlighter CSS. You could either make that definition more specific, or manually set the .comment in the SyntaxHighlighter CSS to have no float, etc.
@ibnyassen: You blog is showing the Wordpress error page.
Right now I’ m using Wordpress 2.6 but it didn’ t work either with 2.3.x nor with 2.5.1, and yes, I’ m using the visual editor…
As regards SyntaxHighlighter Plus I’m using 0.18, but neither 0.17 worked, in every kind of combination with Wordpress versions.
Another problem is the conversion of special chars, such as: “&”, “>”, “<” and ” “…they just appear in the article like “ ”, “>”, “<” and so on…I really need this fantastic plugin to work properly!
Bye, Derick
Hi Fred,
first of all I want to thank you for this awesome plugin, very very useful..
I’ ve got the SAME, IDENTICAL problem Derick has:
1) Indentation not working properly
Moreover, I’ ve got an issue with “”, ” ” and “&” chars decoding; they don’ t appear as they should.
I’ m using latest versions both of SHP and Wordpress (2.6) with a visual editor. It seems everyone knows the problem is in the WYSIWYG editor, but noone knows how to fix it!
Hope you have a solution for both my problems!
Goodbye, Nicola
Ok, I think you’ ve understood which are the chars I meant..your comment editor just converted them!
(They are “greater than”, “less than”, “space” and “ampersand”)
I suggest that change ‘width: 530px;’ in line 6 of css file to ‘width: 100%’ to adapt various width of theme.
Hey Fred,
Great plugin just one problem when i use the & in a piece of bash code it gets changed to & and every edit an amp; gets added very anojing also the & shows up as & instead of &….
[mad]Berry
Found another little problem wit the following post
http://madberry.org/2008/08/do.....with-wget/
The line:
wget –wait=20 –limit-rate=20K -r -p -U Mozilla http://myhdwallpaper.com
In the highlighter became:
wget –waitwait=20 –limit-rate=20K -r -p -U Mozilla http://myhdwallpaper.come
For some reason there is an extra “wait” in it the tags used are
[bash][/bash]Can’t seem to figure out why this is happening. Do you know?
[mad]Berry
Works great with one problem. If I use a line of code that begins with < ? p h p (without spaces of course), the entire line disappears.