Description:
As seen on WordPress.com.
SyntaxHighlighter Evolved allows you to easily post syntax-highlighted code to your site without having to escape the code or anything. It uses the SyntaxHighlighter JavaScript package by Alex Gorbatchev to do the highlighting and supports all of the package’s parameters via shortcode attributes.
For a list of supported languages (most widely used languages are supported), see the WordPress.com support document.
Download:
- Download from WordPress.org (180,543 downloads)
Example Code Output:
Note that there are various different color schemes available.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>PHP Code Example</title> </head> <body> <h1>PHP Code Example</h1> <p><?php echo 'Hello World!'; ?></p> <p>This line is highlighted.</p> <div class="foobar"> This is an example of smart tabs. </div> <p><a href="http://wordpress.org/">WordPress</a></p> </body> </html>
If you prefer, you can hide the line numbering and other UI stuff with the “light” mode:
[tag light="true"]your code here[/tag]
There are many other parameters and defaults you can control via the Settings page or the shortcode parameters. Full details and instructions are located at the bottom of the Settings page.
Cpp-Programming.net on October 2nd, 2009 at 12:50 PM wrote:
I have a newer version of this plugin sitting on my computer that does code in comments and the text widget (plus a bunch of other behind the scenes stuff). However it requires WordPress 2.9. I think I’ll backport everything that doesn’t require WordPress 2.9 though and release it now (I think only code in widgets actually requires 2.9 code changes).
Stay tuned.
Hii, I am having trouble to display my java jsp based code. I have tried many tricks to display the following code, but failed. Any help or guidance in this will be much appreciated.
*.jsp
true
true
[...] SyntaxHighlighter – Permite a exibição de códigos (html, css, php, javascript) de forma elegante, além de impedir que os mesmos sejam executados ou ocultos dentro de um artigo. [...]
[...] SyntaxHighlighter Evoled [...]
[...] After like 1 hour of research and testing, I found SyntaxHighlighter Evolved! here is the plugin’s website: http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/. [...]
Hi Viper,
Thanks for the great plugin. Just wondering if the following two features are worth to include in the next update:
1. Include this erlang brush into the plugin (as everytime I update, WP delete my erlang brush)
2. Can a maximum line displayed be define in the setting? Say, I want to display only 30 lines, and scrollbar is available for code length > 30
Many thanks,
Trung
Trung on October 8th, 2009 at 7:37 PM wrote:
That is for the old version of the highligher. I’m surprised it even works.
Also you do not need to modify any part of my plugin or stick the brush in it’s folder. I provide hooks for adding your own languages and brushes to my plugin.
Trung on October 8th, 2009 at 7:37 PM wrote:
This is not a feature of the highlighter, therefore I didn’t add it. You could easily do so via
.syntaxhighlighter { max-height: 200px !important; }though.Hello,
first of all… Good job & many thanks!
I have also a problem with the “Copy to clipboard” SWF… Apparently, if it can help somebody, it works good if the wmode=”transparent” is turned off on Firefox.
Firefox is known to have problems with the transparent wmode, so a solution would be to create a non-transparent SWF, with the good background color.
Thanks for the advice, Viper.
cpayen on October 11th, 2009 at 2:47 PM wrote:
I am unable to reproduce in Firefox, and the transparent background is required due to the different (and custom) theme colors.
Hello there!
I was kind of curious as if you finally were able to back-port those changes you mentioned. I just can’t wait…!
Please, I don’t mean to make this like begging or something but… please, release it as soon as possible! :’(
Andrés Botero on October 12th, 2009 at 9:38 PM wrote:
I’m currently on a business trip. It’ll likely have to wait until next week before I have time.
[...] wältze ich mich grade durch so einige Plugins und bin am Ende doch fündig geworden: SyntaxHighlighter Evolved (offizielle Projektseite bei WordPress.org) erfüllt alle [...]
[...] che utilizzando il Geshi non mi dava troppe soddisfazioni, per ripiegare sul più usato SyntaxHighlighter Evolved, che utilizzando SyntaxHighlighter di Alex Gorbatchev, permette di trovare il connubio perfetto fra [...]
I’m using FP 10 Debug in Chrome and I can’t seem to find out why I get this error when running my mouse over code which is displayed using this plugin.
Error #2044: Unhandled IOErrorEvent:. text=Error #2036: Load Never Completed.
Anyone have any idea how to resolve this?
Paul Gregoire on October 25th, 2009 at 4:55 PM wrote:
Never heard of such an error, although I didn’t write the Javascript this plugin uses.
Try contacting it’s author: http://alexgorbatchev.com/wiki/SyntaxHighlighter
Here is a fixed clipboard.swf until the final fix is included with SyntaxHighlighter. Apparenlty the code has already been fixed but not included yet.
- The fix
http://bitbucket.org/alexg/syntaxhighlighter/issue/107/unhandled-ioerrorevent-from-clipboardswf
- Updated swf
http://dl.dropbox.com/u/340823/clipboard.swf
Just copy this into the scripts folder of SyntaxHighlighter
Thanks, but since this code is so widely used, I’d prefer to use only code that has been validated/reviewed by Alex himself. I’ll wait until he okays it.
[...] SyntaxHighlighterEvolved (Use with visual code editor below for even easier editing) With several built in styles for code editing, this syntax highlighter was the only one that didn’t break the styling on my blog. [...]
Hey man, thanks a TON for such an awesome plugin!
One quick question: When I’m using the WordPress function
the_excerpt()instead ofthe_content()on the main page (to automatically show the first 55 words of a post), is there any way to get the code in those first 55 words formatted by the SyntaxHighlighter Evolved plugin?Raam Dev on November 2nd, 2009 at 1:53 PM wrote:
This may work (add to your theme’s
functions.phpfile):Viper007Bond on November 2nd, 2009 at 2:02 PM wrote:
This may work (add to your theme’s
functions.phpfile):[/quote]
Hmm, I had high hopes for your suggestion because I thought it would be something like that, but unfortunately that didn’t work. If you, or anyone else here, has any other suggestions, I’d really appreciate it. Thanks!
[...] SyntaxHighlighter Evolved est une librairie Javascript qui permet de colorer automatiquement votre code sans perdre la mise en forme et sans faire de modification manuelle. Vous pouvez aussi mettre en surbrillance des lignes spécifiques, personnaliser l’apparence et user de différentes options proposées dans l’interface d’administration de WordPress. [...]
Hi,
Thanks for a great plugin. Any chance that it will be updated to Alex’s latest 2.1.364 version? It adds an updated Java brush (that is of interest to me), a new theme, removal of the ruler option and a bunch of bug fixes.
Thanks
I noticed that in preview mode on WordPress quotes in code such as ” turn into " (not sure that this will get parsed properly) when viewed in preview mode in WordPress.
Sam on November 4th, 2009 at 7:57 PM wrote:
I wasn’t aware there was a new version. I’ll update ASAP.
Sam on November 4th, 2009 at 8:00 PM wrote:
I’ll double check previews when I update my plugin for the new highlighter version.
Thanks for the quick response! I expected to see an answer in a day or 2, not a few minutes
I forgot the most important part of the update
Line wrapping now works and looks like in most text editors, no more image.
As part of the move to Alex’s updated SyntaxHighlighter 2.1, can the change in the generated page be made from <pre class=”brush: java”> to <script type=”syntaxhighlighter” class=”brush: java”> ? See Alex’s updated usage info for 2.1. This should certainly help with page validation.
In case that did not work (due to parsing), here is a second attempt.
Current 2.0:
Future 2.1:
Thanks
Sam on November 5th, 2009 at 10:50 AM wrote:
There’s no reason to do that. My plugin automatically escapes HTML characters and the HTML it produces is totally valid. The new feature is designed for people who manually post code into the site.
Plus it would make the code not show up for people without Javascript and it’d also stop it from showing up in feeds.
Thanks for the explanation. Any ETA on the new release?
Thanks
You use WPtouch for iPhone access. Note that the date for all comments on your site in WPtouch is the number of days since the UNIX Epoch. WPtouch seemed to have fixed this, but it does not seem to work on your blog. I wonder in the WP 2.9 release you are using is to blame, or something else. As far as WPTouch, the syntaxhighlighter code shows beautifully on the iPhone till you click on the code section, and at that point an ugly No Flash icon is displayed since the clipboard uses a flash component that is not supported by the iPhone.
Darren on July 21st, 2009 at 8:49 AM wrote:
Here is a patch : http://raw-blog.com/wordpress-syntaxhighlighter-corriger-les-entitees-html-46.html
[...] ???????????????????????????blog??????????????????????????????SyntaxHighlighter????????? ???????????????????????WordPress??????????????SyntaxHighlighter Evolved?????????????????????????ActionScript 3.0????????????????????? [...]
Sam on November 5th, 2009 at 8:03 PM wrote:
Why are you asking me? I’m not the maintainer of that plugin.
Sam on November 5th, 2009 at 8:03 PM wrote:
There’s 4 buttons. The far left one opens the code in a new window, the second one uses Flash to copy the code to your clipboard. Click the first one.
jb on November 6th, 2009 at 4:16 AM wrote:
Here is a patch : http://raw-blog.com/wordpress-syntaxhighlighter-corriger-les-entitees-html-46.html/quote
The TinyMCE plugin has been rewritten for v2.3.0 of my plugin, so this issue is likely already resolved in a better fashion. (It’s live on WordPress.com right now with no reported issues.)
Sam on November 5th, 2009 at 8:03 PM wrote:
A new version very recently came out and I hadn’t upgraded. I’m running the latest version now.
ok, thanks for the news
Hi Viper,
thanks for the new Update but i’m having some problem. The code is not showing normaly to my website. It splits into rows in a strange way.
Just take a look at this thread:
http://www.romeolab.com/siguria-e-fjalekalimeve
For ex. in the first highlited text it should be show so and not as there:
$fjalekalimi = ‘web12345′;
$hash = md5($fjalekalimi);
echo $hash;
Any idea wheres the problem?
Thanks in advance
It’s your theme. Remove any CSS from your theme’s stylesheet that affects “pre” or “code”.
Yeah You were right
I just removed a Code attribut and everything works now.
It was strange for me coz the previous versions didnt show this problem.
Thanks a lot for the help
[...] nov.09, 2009 – scritto da : Joel in WordPress Qualche ora fa è uscita la versione 2.3.0 di SyntaxHighlighter Evolved famoso plugin per WordPress, basato sul’ancora più famoso SyntaxHighlighter di Alex [...]
Thanks for the updated version. I too was caught off guard by the issue that Rome mentioned, but it was easily remedied by removing the “pre” and “code” from my CSS (under the hope that I managed to edit all posts that had these tags and change them). I assume that others will run into this issue as well. The settings page has the following option:
“Wrap long lines, using an icon to show where line wraps occur (disabling this will make a scrollbar show instead)”. Since the icon is no longer shown with the latest SyntaxHighlighter version, you may want to reword this option.
What is the easiest way to add CSS properties to the CSS brush? For example, how would I modify SyntaxHighlighter so that it recognizes (and formats) the property
-webkit-border-radius?I use Windows Live Writer to write blog posts. If I post my code with pre tags it doesn’t work.
I really don’t understand whats wrong. I also have posted code with the following syntax
[/csharp]
this one works .. but its really pain to post code with this syntax.
Also when I have page with combination of syntax (I used to use SyntaxHighlighter-Plus before), I get error “Cannot find burhs for csharp”
Can you help me fix this?
You’d have to modify shBrushCss.js and add it to the list of keywords.
Because your code won’t be automatically escaped, so HTML will render rather than showing up in code form.
Your code post appears to not have worked.
Just wrap your code in the shortcode that my plugin provides and it should work fine. csharp is one of the supported languages:
using System; using System.Text.RegularExpressions; namespace SharpVectors.Dom.Css { /// <summary> /// The CSSFontFaceRule interface represents a @font-face rule in a CSS style sheet. The @font-face rule is used to hold a set of font descriptions. /// </summary> /// <developer>niklas@protocol7.com</developer> /// <completed>80</completed> public class CssFontFaceRule : CssRule, ICssFontFaceRule { ...I just installed the new plugin and it horribly messes up the code and frankly I am now embarassed about what people may think when they visit my site.
Go here:
http://stansight.com/WordPress/2009/02/03/broken-image-icon-replacement/
The highlighted code expands to 100% of the page totally overlaying and obscuing the right hand menu bar
The code being highlighted has weird carriage return line feeds – HTML tags are being split to 3 or 4 lines – the code not looks HORRIBLE
How can I back it off or fix it ?
I’ll leave this up for a day so you can see what is happening – but after that I’m going to have to find the old code (which I have been using for years) or just yank the pluggin and re-edit all of my pages.
Read posts higher up. Uou have to remove any pre and code referencees in your CSS. Specifically you have:
pre, code { background: #fff url(images/preback.gif) repeat-y left top; border: 1px solid #dadada; color: #000; display: block; font: 9px 'Courier New' , Courier, Fixed, monospace; font-size: 100%; line-height: 15px; margin: 1em 0; overflow: auto; padding: 0 10px 0 55px; text-align: left; }in your stylesheet. Please comment it out, and all should look good.
[...] SyntaxHighlighter Evolved [...]
First of all, thanks for this great plugin. Second, I’m having some problems after updating this plugin to the latest version. I’m currently using the LightWord theme by Andrei Luca and syntax highlighted code is displayed incorrectly as you can see in this post: http://privatevoid.org/2009/11/05/md5-in-java/
Any suggestions? This is probably the theme’s fault as it works fine with the default theme. I’m just trying to figure which style is causing it, so I can report it to the author.
I managed to fix this bug by commenting out the following from the first block in shCore.css:
font-size: 1em !important;
min-height: inherit !important;
No need to comment out font-size and the min-height is being pulled in from your theme. If you remove it from your theme, it won’t break SyntaxHighlighter.
[...] My WordPress�Plugins � SyntaxHighlighter�Evolved � Viper007Bond.com (Wor… [...]
So uh… How does it work?
I see Syntax Highlighting on the “SyntaxHighlighter Settings” page, but not anywhere else. What do I do to make it work?
[...] It doesn’t work. Discuss this article [no comments yet] [...]
It seems to work if I surround things with tags, but not . I get a pop-up alert:
SyntaxHighlighter
Can’t find brush for: php
Yes, the settings page contains examples and all of the available parameters.
As for your blog, are you using the shortcode, or are you manually typing in the pre tag or something?
I see in your footer that the Python script is being loaded, so the plugin is working, however it’s not detecting that you used the PHP tag and therefore need it’s Javascript file to be loaded.
Do it just like this:
I was entering the pre tag into the HTML editor. If I enter this it works though:
[python] def function(): pass [/python]Language files are loaded dynamically (they are only loaded if they’re needed). If you use the pre tag directly, then my plugin won’t know you need it and won’t load it.
You need to use the shortcode (as I said above).
Ohhh… that’s what you’re *supposed* to do? That’s what I was trying to figure out. Can you put brief instructions in the description?
Hi, nice theme. Can you tell me how to get rid of the default Twitter widget and/or replace it with my twitter account instead of the WordPress twitter account. I’m using WordPress 2.8.6. If I drag the Mystique Twitter widget to the default sidebar and set it up for my Twitter account, it works, but putting it there gets rid of the search and tool/tab widgets. So, I try putting it in the secondary sidebar, I still get the WordPress twitter account. Also, if I add a Twitter widget to the footer and set it up for my Twitter account, I get both the WordPress tweets AND my tweets. Note, I’ve also tried dragging to the Inactive Widgets area, but that does nothing to get rid of the Twitter widget; it still shows up with the WordPress twitter account. I’m at a loss. Please help.
A) This has nothing to do with my plugin, so you’re on the wrong post.
B) If you add a widget to your sidebar, it gets rid of the default content. Just re-add the search and “Mystique | Sidebar tabs” widgets if you want them back. Simple.
Wow, you’re right. Wrong blog. It was late. Sorry about that, but thanks for replying and setting me straight.
Since updated to version 2.3.0, my codes start having wierd padding in each line and inserting new line every after a reserved keyword (e.g. `from`,`import`, `def` for python).
This incident is obviously seen in http://blog.yolcoyama.net/?p=80.
Any ideas?
Delete this block of code from your theme’s style.css:
.post_content code { display: block; margin: 10px; padding: 5px; clear: both; font-size: 12px; font-family: Geneva, Arial, Helvetica, sans-serif; border: 1px solid #eeeeee; background-color: #ffffff; font-style: italic; color: #606060; }v2.3.1 of my plugin should make that “display: block;” not totally break the code.
wow..
now they turned looking like what I expected when I commented it out.
thanks viper
[...] Display of PHP code possible courtesy SyntaxHighlighter Evolved. [...]
[...] SyntaxHighlighter Evolved [...]
I’m using SyntaxHighlighter Evolved 2.3.1, WordPress 2.8.6 and I’m still having problems with escaped HTML entities and other formatting problems with WordPress’ Visual Editor.
Even when I don’t use Visual editor, just use the HTML editor then save the post, it gets htmlentitified and SyntaxHighlighter Evolved displays the htmlescaped code
http://raw-blog.com/wordpress-syntaxhighlighter-corriger-les-entitees-html-46.html link is broken now
I hope there’s a solution. Thank you.
Hendy: Hmm, try disabling all other plugins. Perhaps another is interfering.
@Viper007Bond : Hey, you’re right! I disabled the Zemanta and my post is looking great now!
Zemanta is quite a nice plugin actually but I need SyntaxHighlighter Evolved more!
Thanks!
BTW, you should use Disqus for your comments.. At least for the threaded but also for other features.
My code below
<?php comments_number('No Responses', 'One Response', '% Responses' );?> to “<?php the_title(); ?>”</h3> <ol class="commentlist"> <?php wp_list_comments(); ?> </ol> <div class="navigation"> <div class="alignleft"><?php previous_comments_link() ?></div> <div class="alignright"><?php next_comments_link() ?></div> </div> <?php else : // this is displayed if there are no comments so far ?> <?php if ('open' == $post->comment_status) : ?> <!-- If comments are open, but there are no comments. --> <?php else : // comments are closed ?> <!-- If comments are closed. --> <p class="nocomments">Comments are closed. <?php endif; ?> <?php endif; ?>but when I preview it, i got:
<?php if ( have_comments() ) : ?>
<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to “<?php the_title(); ?>”</h3>
<ol class="commentlist">
<?php wp_list_comments(); ?>
</ol>
<div class="navigation">
<div class="alignleft"><?php previous_comments_link() ?></div>
<div class="alignright"><?php next_comments_link() ?></div>
</div>
<?php else : // this is displayed if there are no comments so far ?>
<?php if ('open' == $post->comment_status) : ?>
<!-- If comments are open, but there are no comments. -->
<?php else : // comments are closed ?>
<!-- If comments are closed. -->
<p class="nocomments">Comments are closed.
<?php endif; ?>
<?php endif; ?>
it converted to ASCII character.
What happened? I’m using only Preserve Code Formatting plugins
Thanks for the updated version. Version 2.3.1 allowed me to revert back the pre/code css to my theme. I am sure that this will cut down on the “tech support” postings.
Narga: try disabling other plugins to see if any of them are causing problems.
I’m deactive all plugins and only use askimet then it still happened!
“Preserve Code Formatting” will break my plugin. Disable that plugin, keep it disabled, and then copy/paste in your code again.
yes it works with shortcodes.. when I give shortcode the javascript containing the brush alias are inserted in the html..
But shortcode wont preserve my code formatting in LiveWriter .. it will be scrambled if I switch views .. only pre tag preserves the code formatting ..
is there anyway to use pre tags to post code instead of shotcodes?
[...] WordPress › SyntaxHighlighter Evolved « WordPress Plugins: ?? SyntaxHighlighter Evolved « My WordPress Plugins « Viper007Bond.com: [...]
If you aren’t going to use the shortcodes, then there’s no point in using my plugin. Just load the Javascript files into your theme and have them always be there. Or use a plugin that’ll help you do that: http://www.lastengine.com/syntax-highlighter-wordpress-plugin/
Hi Viper007Bond,
First of all, thanks for writing this cool plugin. Now let’s get to what is bugging me.
I can’t get Objective-C brush to work on version 2.3.1. With the previous version neither, but I pasted this brush http://alexgorbatchev.com/forums/comments.php?DiscussionID=27 on the shBrushObjC.js and it worked as expected. However the same workaround did not do the trick.
Could you take a look on what’s going on? Thanks in advance!
PS: Would you mind adding the alias cocoa to this brush? Just a small request for the lazy writers.
Please see my comment below, on Dec 5th. Cheers!
Aaahh, I don’t know about this bug but when I preview the published post then it converted to ASCII character, after I saved, it is work correct.
This was mentioned earlier.
Whoops, completely forgot.
I’m unable to reproduce any HTML entity issues. Preview mode works perfectly for me using WordPress 2.9 beta 1.
It’s likely another plugin causing problems or perhaps a fixed WordPress bug.
Can you try previewing a brand new post with no title? I am not sure if the title figures in or not, but that is one way to replicate.
Unfocusing the title field triggers an autosave, but so should pressing the preview button.
Still works fine for me, but as I said it could be a bug that was fixed.
Very tall rows? I removed the “” formatting in my CSS files but I can’t get my table to have shorter rows. Where else should I be looking?
Sorry, here is what I meant to write… I removed the “pre” and “code” formatting in my CSS files but I am still getting very tall rows. What do I need to get shorter rows. Where else should I be looking?
http://blog.omita.com/?p=267
So… the bug seems to be related to “min-height”. I can’t figure out force then .syntaxhighlighter to actually use the “min-height” I set…
all I need todo is get this one line in and all is well… how do I do this. I have tried putting this css code all over the place but it never seems to take.
.syntaxhighlighter table tbody { min-height: 1px; }
I found the min-height class that everything was inheriting from and fixed the issue… hopefully I didn’t make my Theme blow up for some other setting.
Not sure why min-height is there. I’ll be removing it from the next version.
As for why your CSS wouldn’t take, it’s because SyntaxHighlighter uses !important and hooks in at the very end of the head.
[...] with SyntaxHighlighter Evolved based on Syntax [...]
[...] upgrade my syntax highlighting plugin to SyntaxHighlighter Evolved which definitely has some nice new features. Most importantly to me is that I can remove line [...]
Currently, ‘print’ is not defined as a function in shBrushPhp.js in SyntaxHighlighter Evolved 2.3.2. While I realize that ‘print’ isn’t a function, and is rather a quite common language construct, so is ‘echo’ (which is classified as a function in 2.3.2).
Good catch. Fixed in v2.3.3 and I’ve submitted a bug report upstream to the author of the SyntaxHighlighter Javascript package.
[...] SyntaxHighlighter Evolved (which I had to tweak a bit, given that the support for Objective-C is currently broken off the box, which as you can imagine is a bummer for an iPhone dev blog like this one [...]
[...] to the “SyntaxHighlighter Evolved” plugin by ViperBond007 to show these codes easily. Give it a try. … other posts by The [...]
Thanks, Viper… works like a charm as usual. Just ran into some odd behavior at http://sourcebench.com/languages/bash/download-mirror-an-entire-website-with-wget/
It seems that links are wrapped in <a href tags which are then also displayed as source. As I could not find any filter in my P2 theme that does it i was wondering if that might be something in your plugin?
Yeah, don’t make URLs hyperlinks. It’ll display exactly the code it’s given (check HTML view). Or does P2 auto-hyperlink URLs? That may be a problem if it does.
After the ‘print’ thing, I decided to take a look at SyntaxHighlighter’s PHP Brush, and noticed that it could use some improving. I took a few hours out of my day to make it work how it should. Please feel free to include this in your next release of SyntaxHighlighter Evolved.
I submitted my file to Alex, and so I’m going to see if I can get this included in his next release of SyntaxHighlighter.
http://bundyxc.com/?p=33
Hi,
Do you know why it doesn’t work there
http://msaccessvbatutorial.com/blog/test-syntax-highlighter/
?
Thanks.
You’re sure the plugin is activated?