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

  1. Pingback: 3 Syntax Highlighter Plugin per Wordpress - Adostudio
  2. Pingback: Posting Source Code di WordPress « Web Development Labs

  3. Hi!

    Can you help me, in readme.txt don’t have any mention to font size, is very very small in my installation…
    In your example (upside) font size is normal, why…?

    Reply
  4. Pingback: Escribir código en Wordpress | Memorias de un aprendiz
  5. Pingback: Plugin - SyntaxHighlighter Evolved | Treze Droid
  6. Pingback: QuestioVerbum.org » Blog Archive » New Plugins Added - Seeking The Word and Truth Through Literature and Theology
  7. Pingback: wordoress???10????????? | PHP10086???
  8. Pingback: ?Blog???wordpress | Euclidvi31's Blog

  9. > TIP: Don’t use the Visual editor if you don’t want your code mangled.
    > TinyMCE will “clean up” your HTML.

    <pre>  ...  </pre>

    And then nothing more is removed from TinyMCE.
    But now you have to remove the , when displayed.

    Is planned for sometime a direct integration of an insert buttons in TinyMCE?

    Reply
  11. Pingback: WordPress??????????????? | ?????????
  12. Pingback: Markdown??????????????? | Ginpen.com
  14. Pingback: ??????????????????????????????????SyntaxHighlighter Evolved? | WordPress ?????? ??
  15. Pingback: ??????????????????????????????????SyntaxHighlighter Evolved? | WordPress ?????? ??
  16. Pingback: ??????????????????????????????????SyntaxHighlighter Evolved? | WordPress ?????? ??
  17. Pingback: Syntax Highlighting in WordPress | Mr.Fish Studios

  18. Hi,
    Is there any chance that you can make the code block expand on mouse over? (currently, on mouse over the toolbar is displayed).
    Thanks,
    DM

    Reply
  19. Pingback: Code highlighter: expand on mouse over - Colorblind Programming
  20. Pingback: WordPress?????????????????? @ ????WEB?????
  21. Pingback: SyntaxHighlighter | ?????
  22. Pingback: ??????????????(Wordpress?Template??) | ?????????? ?????????(?)
  23. Pingback: WP SyntaxHighlighter ?????1.7.1 | ?????

  26. Hi, I have testing SyntaxHighlighter and noticed that if you turn off line numbering and then save the settings then if you try to turn line numbering back on then it does not work, in order to get the line numbers back you have to load the defaults. Also I have seen this plugin being used were by each line of code has an alternative coloured background for ease of reading, how can I get that effect to work with your plugin ? It would be nice if when users cut & paste the code that the line numbers were not included. Also if line numbers were turned off it would still be nice to keep the green verticle line but unfortunately it disappears. Any pointers would be really appreciated.

    Reply

    1. I’ll investigate the line number setting issue.

      Also I have seen this plugin being used were by each line of code has an alternative coloured background for ease of reading, how can I get that effect to work with your plugin ?

      I believe that was a feature of v2.x of the highlighter. You can switch to it from the settings page.

      It would be nice if when users cut & paste the code that the line numbers were not included.

      That is one of the features of v3.x of the highlighter. Try it at the top of this page — the line numbers shouldn’t be selected when you select the code.

      Also if line numbers were turned off it would still be nice to keep the green verticle line but unfortunately it disappears.

      The green bar is just there as a divider between the code and the line numbers. It’s not needed if you don’t have line numbers.

      You could add a left border using CSS though.

      Reply
  27. Pingback: ???????? | toemon's Blog Site
  28. Pingback: Wordpress First Steps « ingegno.it

  29. Dear Sir,

    I’m using your SyntaxHighlighter plugin, but when I try to use the methods shown on the settings page for dispalying the block of code I want to highlight it gives me the wrong code.

    if you go here: http://tutorials.mysitemyway.com/adding-versatile-button-shortcodes-to-your-wordpress-theme/

    and scroll to the bottom of the page you’ll see your plugin in action.

    If you go to my page: http://timothycaron.com/button-shortcodes/

    You’ll see something entirely different: It’s actually displaying the HTML the shortcode produces and not this:
    [button link="#" variation="teal" size="large"]Your Text[/button]
    [button link="#" variation="teal"]Your Text[/button]

    Can you help point me in the right direction?
    Thanks
    Tim

    Reply

  30. Hi,
    I’m using SyntaxHighliter for wordpress, but I found that it didn’t work in my own theme. I put the around the code, and it works well in the default theme “twentyeleven”. But if the theme is switched to the one I made, the code won’t be highlighted anymore.
    I’ve checked the page element, it is:

    <pre class="brush: php; title: ; notranslate" title>code here</pre>

    But the code between is just like the words anywhere else.
    So is there anything I need to do in my theme in order to make it work?
    Thanks
    Melkor

    Reply
  31. Pingback: ????????????????????? | Nulab Tech Blog
  32. Pingback: 30 Most Important WordPress Plugins | Phire Base - Graphic, Webdesign, Inspiration. Adobe & WP
  33. Pingback: T?? ? Techpot » Blog Archive » wordpress?????
  34. Pingback: ????????? ???? - ?????? SyntaxHighlighter Evolved | ??? ? WEB ????????????????

  35. I currently use “code highlighter” wordpress plugin but want to move over to syntaxhighlighter for the extra functionality. The one things thats preventing me so far is the ability to limit the size of code boxes.

    If i want to post 100 lines of code i obviously wouldn’t want all that displayed, instead maybe a scrollable box that only displays 15 lines of code for example.

    Currently i use the following code on my code highlighter plugin:

     overflow: auto; max-height: 200px;

    How can i add this to syntaxhighlighter?

    P.s. I’m aware of the collapse code option but i would like show some of the code rather than none.

    Cheers

    Reply

    1. That is from “Version 2.x”. You can switch to it from the Settings page (Settings -> SyntaxHighlighter).

      “Version 3.x” doesn’t need it though because you can just highlight it with your mouse and copy/paste without getting line numbers.

      Reply
  37. Pingback: Exec-PHP?SyntaxHighlighter????????? | Birds in Code
  38. Pingback: ????Wordpress?????????10? | ninjatokyo.com
  42. Pingback: Adding a custom PowerCLI brush for syntax highlighting on Wordpress | www.vExperienced.co.uk
  44. Pingback: [Wordpress] Plugin para mostrar códigos fuente
  45. Pingback: Plugins WordPress
  46. Pingback: Plugins WordPress | Dicasrc | Informática
  47. Pingback: Plugins WordPress | Portal Upideia
  48. Pingback: WordPress SyntaxHighlighter font size fix | Zend Framework University
  49. Pingback: Stefan Ledin - webbutvecklare
  50. Pingback: PG??(WP)
  51. Pingback: The Top 100 WordPress Plugins For Your Site
  52. Pingback: WPMU’s 100 Best Plugins | Talking Wordpress
  53. Pingback: WordPress??????SyntaxHighlighter Evolved | ?????
  54. Pingback: The Top 100 WordPress Plugins For Your Site « Mõtteid IT maailmast ja selle lähistelt

  55. the toolbar is not showing, what should the code look like, I have 

     My Code

    if i want to add attributes how do I enter them, basically what would it look like…

    Reply

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

    Reply

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

    Reply
  58. Pingback: Top 100 WordPress Plugins yang Perlu Ada | Wan Rizuan Blog
  59. Pingback: Viktor Hugo Morales | Wordpress Shortcode: Compartir jsFiddle y PasteBin en tu blog
  60. Pingback: Plugins « Erik Clark

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

    Reply
  62. Pingback: The Top 100 WordPress Plugins For Your Site | Multidots Solutions
  63. Pingback: wordpress??synaxhighlighter????? | ???????????-PHP?JAVA??

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

    Reply

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

      Reply

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

    Reply
  67. Pingback: 10 Must-Have WordPress-Plugins - Raphael's Blog
  68. Pingback: ????SyntaxHighlighter Evolved ???? (??????) | attosoft.info
  69. Pingback: SyntaxHighlighter ? Diff (??) ???????????????????? | attosoft.info

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

    Reply

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

        Reply

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

          Reply

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

    Reply

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

        Reply
  72. Pingback: Worspress??????????????????????????? | Edu Dev.net
  73. Pingback: Add new theme for “Syntaxhighlighter Evolved” plugin?JOURNAL?UNSTANDARD
  74. Pingback: Web ?????????????? | attosoft.info
  75. Pingback: KraX » L’extension Wordpress SyntaxHighlighter
  76. Pingback: Embedding code in WordPress posts | Joey Digital
  78. Pingback: WordPress??????? | ???

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

    Reply
  80. Pingback: 100 Best Wordpress Plugins by Webworx | Wordpress Web Designer
  81. Pingback: L’extension Wordpress SyntaxHighlighter | Le blog de DeTraX

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

    Reply

          1. Yep, now I found the error. It was Adsense Extreme plugin that if you set to display your AD above the title of the 1St post in the homepage add a inside (It’s a Bug).
            Thank you
            Eclipses

            Reply
  84. Pingback: Top 100 Wordpress Plugin For Your Wordpress Blog

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

    Reply

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

      Reply

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

        Reply

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

          Reply
  86. Pingback: Fixing the SyntaxHighlighter Evolved WordPress plugin’s font-size issues with Fluid-Blue theme. | David Anderson
  87. Pingback: WordPress blog için gerekli 10 eklenti | PROGRAMLAMA | Ceviz.Net
  88. Pingback: Activado SyntaxHighlighter Evolved Para el Resaltado de codigo : UPTA – Aragua Informatica, Sistemas y Comunicacion
  89. Pingback: SHshortcodes – Syntax Highlighter shortcodes plugin for Wordpress - MyCardBoardBox
  90. Pingback: Installing and Configuring WordPress - ????
  91. Pingback: Plugin SyntaxHighlighter Evolved for WP. ??????, ??????? ??????????? ???. |

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

    Reply
  93. Pingback: Highlight code in WordPress with SyntaxHighlighter Evolved | Synapticism
  94. Pingback: Dani SetiyawanTop 100 Plugin Wordpress Terbaik 2012 Dani Setiyawan
  95. Pingback: Gherkin Syntax for SyntaxHighlighter Evolved | Best Plugins - wordpress – widgets – plugin 2012

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

    Reply

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

      <style type="text/css">.syntaxhighlighter { font-size: 10px !important; }</style>

      I think that’ll work.

      Reply

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

        Reply

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

    Reply
  98. Pingback: Wordpress: Code darstellen und hervorheben » kre8tiv - Ben Jopen
  99. Pingback: 19 of the best WordPress Plugins to use with your Multisite Network

Leave a Reply