SyntaxHighlighter Evolved

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.

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, for example:

[php light="true"]your code here[/php]

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.

Download:

GitHub:

This plugin is available on GitHub. Issues, patches, and pull requests are welcome.

https://github.com/Viper007Bond/syntaxhighlighter

1,721 thoughts on “SyntaxHighlighter Evolved

  1. 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:

    <pre class="brush: js">
    ...
    ...
    </pre>

    Future 2.1:

    <script type="syntaxhighlighter" class="brush: js"><![CDATA[
    ...
    ...
    ]]></script>

    Thanks

  2. Sam on November 5th, 2009 at 10:50 AM wrote:

    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”> ?

    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.

  3. 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.

  4. Pingback: SyntaxHighlighter???AS3?getURL?????? - Task.BSM blog

  5. Sam on November 5th, 2009 at 8:03 PM wrote:

    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.

    Why are you asking me? I’m not the maintainer of that plugin.

    Sam on November 5th, 2009 at 8:03 PM wrote:

    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.

    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.

  6. jb on November 6th, 2009 at 4:16 AM wrote:

    [quote comment=”228091″]I am having problems with the Visual Editor, as soon as I have pasted my code in the HTML view, I switch back Visual and all the code is lost.

    Any ideas?

    Here is a patch : http://raw-blog.com/wordpress-syntaxhighlighter-corriger-les-entitees-html-46.html%5B/quote%5D

    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.)

  7. 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


  8. Viper007Bond:

    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

  9. Pingback: m3c – SyntaxHighlighter Evolved 2.3.0 [Wordpress] – Ora formatta il codice nei commenti -

  10. 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.

  11. 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?

  12. 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?


  13. SEOmofo:

    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?

    You’d have to modify shBrushCss.js and add it to the list of keywords.


  14. Zuhaib:

    I use Windows Live Writer to write blog posts. If I post my code with pre tags it doesn’t work.

    Because your code won’t be automatically escaped, so HTML will render rather than showing up in code form.


    Zuhaib:

    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?

    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&nbsp;: CssRule, ICssFontFaceRule
    	{
    
    ...
  15. 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.

  16. 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.


    Stan Slaughter:

    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.

  17. Pingback: WordPress Plugin Releases for 11/11 « Weblog Tools Collection

  18. 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.

Leave a Reply