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.

[php htmlscript=”true” highlight=”12″]<!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>[/php]

If you prefer, you can hide the line numbering and other UI stuff with the “light” mode, for example:

[code light=”1″][[php light="true"]your code here[/php]][/code]

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,818 thoughts on “SyntaxHighlighter Evolved”

  1. Pingback: The Top 100 WordPress Plugins For Your Site

  2. Pingback: WPMU’s 100 Best Plugins | Talking Wordpress

  3. Pingback: WordPress??????SyntaxHighlighter Evolved | ?????

  4. Pingback: The Top 100 WordPress Plugins For Your Site « Mõtteid IT maailmast ja selle lähistelt

  5. the toolbar is not showing, what should the code look like, I have [sourcecode language=”html”] My Code [/sourcecode]
    if i want to add attributes how do I enter them, basically what would it look like…

  6. Hi,

    First off thanks for the plugin, saved me creating my own using SyntaxHighlighter.
    Couple of things I hope you would consider:
    1) My preference is that the vertical line (next to the line numbers) is grey, not green. I’ve changed this in the CSS but my concern is it will be over-written when an update is released. Could you make the HTML color code used for the vertical line a setting/preference?

    2) Do you expect to be merging the features of v2 and v3? In v2 mode I get alternating line colors, text wrapping and the view/copy/print toolbar, in v3 mode selecting text ignores the line numbers.

    Thanks again

    MC

  7. Sorry one more thought, have you considered extending the plugin to add a button to the Post editor for the source code tag?
    I’m thinking it would be great to have a dropdown box in the editor toolbar that inserts the tag and lets you select the syntax language.

    MC

  8. Pingback: Top 100 WordPress Plugins yang Perlu Ada | Wan Rizuan Blog

  9. Pingback: Viktor Hugo Morales | Wordpress Shortcode: Compartir jsFiddle y PasteBin en tu blog

  10. Pingback: Plugins « Erik Clark

  11. Thanks for this plugin! I tried three other plugins that supposedly use SyntaxHighlighter, but with all three my code was having line breaks added, which jacked up lines and threw off line numbering. I figured something about my site was incompatible with the underlying SyntaxHighlighter Javascript, but gave ONE more plugin a shot, yours, and it works like a charm!

  12. Pingback: The Top 100 WordPress Plugins For Your Site | Multidots Solutions

  13. Pingback: wordpress??synaxhighlighter????? | ???????????-PHP?JAVA??

  14. Hi Alex,

    First of all, thanks a lot for such a wonderful plugin. You’re really giving us code-showoffs a great tool!

    I just came across one of the issues on the plugin which I know you’re aware of: the W3C Validator not validating because of the custom meta element used.

    I read you used that element to later load dynamically some CSS according to the version. I think that JavaScript function could be output in place with the proper version. If not possible, also a global JavaScript variable could be set up and later read to be used on that function. There are plenty of options to work on this.

    I searched around in case this plugin was an open source project (is it?). If it was, would you mind to send me where is it located? I would be happy to help with it, and this issue or some others.

    Thanks!
    Alpha.-

    • The Javascript doesn’t read the version, it uses the element as a target. Some Javascript adds some <link>s to CSS stylesheets after it. Patches for better solutions are welcome. 🙂

      And yes, this plugin is of course open source — GPL licensed. Source is in the ZIP file you downloaded.

  15. Is there anything in the works for managing Tiny MCE’s penchant for over zealously messing up my code in the Visual Editor?

    Is the proper work around to just make editing your code your final edit after the rest of your blog post has been edited?

    It seems like it’s only when I switch from HTML to Visual. I suppose I’m going to write in Visual until I’m fully edited and then finish in the HTML editor and clean my code up last.

  17. Pingback: 10 Must-Have WordPress-Plugins - Raphael's Blog

  18. Pingback: ????SyntaxHighlighter Evolved ???? (??????) | attosoft.info

  19. Pingback: SyntaxHighlighter ? Diff (??) ???????????????????? | attosoft.info

  20. Hi-

    Thanks for making this plug-in. It looks great on the screen.

    I’ve been trying to get this to work with various Printer and PDF plug-ins, but the code that is formatted by your plug-in doesn’t look great in the Printer or PDF version. Can you recommend a Printer / PDF plug-in that will work with your plug-in?

    -Ron.

      • Sorry, you’re right. If I use the built-in “Print…” menu in Safari it looks fine. It’s the “Print Friendly and PDF” and “Share and Follow” plug-ins that make a mess of layout.

        Thanks for responding. Love the plug-in.

        -Ron.

        • All of the coloring and such is applied client-side in your browser using Javascript so plugins that directly generate PDFs or something will just get the plain text.

          There are code-display plugins out there though that do all of the highlighting server-side in PHP. You may try one of those.

  21. Hi Alex – thanks for the great plug-in. I had it working beautifully on my web site, but after I moved to a new server, all syntax highlighted code is rendered in a monospace font with no other decoration (e.g. http://www.scicoder.org/mapping-idl-to-python/). I’ve uninstalled and reinstalled the plugin, but am at a complete loss how to fix this. Any help greatly appreciated! –Demitri

      • Thank you so much for your help! That did the trick. My site looks normal again. I posted a message to the Minify plugin group to see if they can address the problem on their end. Thanks again.

  22. Pingback: Worspress??????????????????????????? | Edu Dev.net

  23. Pingback: Add new theme for “Syntaxhighlighter Evolved” plugin?JOURNAL?UNSTANDARD

  24. Pingback: Web ?????????????? | attosoft.info

  25. Pingback: KraX » L’extension Wordpress SyntaxHighlighter

  26. Pingback: Embedding code in WordPress posts | Joey Digital

  28. Pingback: WordPress??????? | ???

  29. Hi! I use your SyntaxHighlighter Evolved. It’s very nice.
    But I find that the last line disappear from sight, when scroll bar appears. In fact your “Example Code Output:” above is same. Namely the last tag disappear.
    please tell me how to appear the last line.

  30. Pingback: 100 Best Wordpress Plugins by Webworx | Wordpress Web Designer

  31. Pingback: L’extension Wordpress SyntaxHighlighter | Le blog de DeTraX

  32. Thanks for this wonderful plugin. I’ve been looking for this for my new blog. Gosh! there are many clones of this plugin, but this is definitely the one I really need.

    BTW, this plugin does not work with minified pages, cos of this line of comment code:

    //document.getElementById(“syntaxhighlighteranchor”).appendChild(themecss);

    Had to remove it to run smoothly again.. thanks.

  33. Hi, I love your plugin but I have a problem:
    In my homepage not work but in the single post page work.
    Could you help me?
    Thank you
    Eclipse

  34. Pingback: Top 100 Wordpress Plugin For Your Wordpress Blog

  35. Hello Viper,

    Not sure this is the right place for support, but i did not find any others…

    I am a happy user of you syntax hihgkighter plugins, but i also do have a problem:

    Your wonderful plugin does not show up for not logged in users!
    I checked that i have required fileds in my footer.php (and also in my header.php), but it does not show up either.

    Do you happen to have a clue about that ?

    Regards,

    Pierre B.

    • Ok, i just found that it was something with the W3cche plugin, when i deactivate it it works flawlessly…

      Any ideas to make it works with the W3Cache plugin ?

      • Wow, I have subscription enabled and found this comment right in my mailbox. As for Pierre B. you just need to empty page cache and other cache (if you are using them, like minification etc) from W3 Total Cache.

        • Thanks Swashata for your answer. I tried to clean every single cache, but it still not working as i would expect.

          The only thing to fix it so far is to disable the minify function.

          I will double check the cache cleaning this afternoon, just to be sure.

      • Probably it’s minification functionality. If you disable that, I bet it’ll work fine.

        EDIT: I just saw your other comment. Yeah, the minification is probably breaking the Javascript somehow.

  36. Pingback: Fixing the SyntaxHighlighter Evolved WordPress plugin’s font-size issues with Fluid-Blue theme. | David Anderson

  37. Pingback: WordPress blog için gerekli 10 eklenti | PROGRAMLAMA | Ceviz.Net

  38. Pingback: Activado SyntaxHighlighter Evolved Para el Resaltado de codigo : UPTA – Aragua Informatica, Sistemas y Comunicacion

  39. Pingback: SHshortcodes – Syntax Highlighter shortcodes plugin for Wordpress - MyCardBoardBox

  40. Pingback: Installing and Configuring WordPress - ????

  41. Pingback: Plugin SyntaxHighlighter Evolved for WP. ??????, ??????? ??????????? ???. |

  42. I just started using your plugin, the site used a artisteer theme, and your plugin was working great.

    Then I switched to the Wp twenty Ten theme and now the code looks right when im logged in, but when im logged out it looks like crap, and displays a full URL starting with http://the-url-here-/-post-info-then-the-code-etc.

    Any ideas why this is suddenly not working?

  43. Pingback: Highlight code in WordPress with SyntaxHighlighter Evolved | Synapticism

  44. Pingback: Dani SetiyawanTop 100 Plugin Wordpress Terbaik 2012 Dani Setiyawan

  45. Pingback: Gherkin Syntax for SyntaxHighlighter Evolved | Best Plugins - wordpress – widgets – plugin 2012

  46. Hey Alex,
    thanks for the plugin! I’ve recently changed the theme and would like to apply an additional CSS rule (make the font for the code smaller).
    In the WP Settings > Syntaxhighlighter Evolved there is a field where I can specify “Additional CSS classes”. After fiddeling around with it for now almost two hours I still can’t get it working. What exactly do I have to specify in this field?
    I’ve tried: An additional class in my theme’s style.css, a css class called .syntaxhighlighter within the style.css, pasting the CSS code directly into the field, adding the important! attribute… but it doesn’t work and I can’t find a proper documentation.

    I would appreciate any advice!
    Thanks,
    Tobias

    • The issue is that the plugin’s CSS also includes !important to avoid getting broken by the theme and that it loads super late in the head meaning it overrides all of the CSS before it, important or not. The easiest solution is to add this to your theme’s header.php file, after the wp_head() call:

      [code lang=”html” light=”1″]<style type="text/css">.syntaxhighlighter { font-size: 10px !important; }</style>[/code]

      I think that’ll work.

      • Thanks Alex, this did the trick.
        I’m using the Genesis theme and it offers some convenient hooks at various places. I put the proposed line of code in the Header hook:
        “genesis_before_header”.
        Thanks & best regards,
        Tobias

  47. I’m having a bit of problem trying to use this plugin. I was previously using tags to designated the codes and I suppose that your plugin would recognize the code between such tags when the ‘ Always load all language files (for directly using tags rather than shortcodes) ‘ option is checked. But that doesn’t seem to be the case.

    Angela

  48. Pingback: Wordpress: Code darstellen und hervorheben » kre8tiv - Ben Jopen

  49. Pingback: 19 of the best WordPress Plugins to use with your Multisite Network

Comments are closed.