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: SHOCOLAT DESIGN | BLOG

  2. Pingback: Blog atualizado! « bruno Kenj on System.Web

  3. Pingback: SyntaxHighlighter Evolved WordPress Plugin

  4. Pingback: ??????????? ????????????? ????? – ????? 1

  5. I had the same problem with HTML entities “suddenly” appearing instead of their actual characters (plugin version 2.2.1, WP 2.91, French locale). I traced it down to one particular plugin: WP-OPTIMIZE. Don’t know what optimisation it does on the DB but it is after running it that the entities appeared. I deleted then repasted the code in my articles and all is fine.

    I still can’t get the tabbing to show up though, even though I have the Use smart tabs option ticked. Am copying & pasting direct from Notepad++

  6. First, let me thank you for a great plugin!
    I am having a problem with getting the plugin to not convert HTML entities on WordPress pages. I want to include some HTML code into one of my WP pages (not posts).
    I am using the HTML view instead of the TinyMCE editor. I added the text:
    [code lang=”html”]
    <div>
    [/code]

    and it appeared as this:

    <div>

    The plugin works on posts just fine. Any advice?

    • OK, the formatting messed things up. The second section was supposed to be:
      [code lang=”html”]
      &lt;div&gt;
      [/code]

      Thanks

  7. Well, I did some more debuging and here is what I found:
    in the function maybe_output_scripts(), the array $this->usedburshes (line 502) is empty when displaying a page and non empty when displaying a post.

    Hope this gives you a hint?

  8. Nevermind, figure it out – the “lang” variable does not recognize “html”, I have to use “xml” and also the plugin content looks wrong only when doing a page preview. When I save the page, it seems to work. Odd!

    Thank you

  9. Pingback: SyntaxHighlighter – Evidenziatore sintassi di Codice - GiaffaBlog

  10. Pingback: Kod ?ród?owy w Wordpress’ie « Notatnik

  11. Pingback: SyntaxHighlighter ou gist.github ? Comparaison de ces solutions pour partager du code avec Wordpress | AbriCoCotier.fr

  13. Pingback: Ménage de printemps sur Tym-Project.fr | ? Tym-Project

  14. Pingback: SyntaxHighlighter Evolved | wordpres hacking

  15. This looks like a fantastic plugin, Alex, and just what I’m after. I’m very impressed by the amount of support you’ve provided in the comments above.

    The plugin does not appear to be working on my test page (see two examples at bottom):
    http://www.aintyomamasblog.com/badge/

    The first example shows my test with escaped code. The code is being converted and displayed non-escaped, without executing the html BUT without the plugin doing its thing.

    The second example shows my test with non-escaped code. The html is being executed and the graphic is displaying.

    The “wp_footer ()” code does exist in footer.php.

    Any help appreciated. Thanks!

  16. Pingback: ???543???wordpress??????????? 2010/3/22?? | ???543

  18. Pingback: 101 Killer WordPress Plugins that Kick Ass - Montana Programmer

  19. Pingback: 101 Killer WordPress Plugins that Kick Ass | MyWebNow.com

  20. Pingback: Wordpress’te Php,Asp,Html kod ekleme (Editörü) eklentisi

  21. is this automatic i mean, is it really automatic..
    i mean do i just have to put the codes on a div or element then it automatically render the deisgn for it?

  22. How does COLLAPSE attribute work?

    I’ve just tried to set it to a number, collapse=”15″
    But it doesn’t work!!

    I need it because I have to post long codes.
    Maybe it isn’t the right attribute.. What is the right attribute to truncate the code??

    Ciao!

  24. Pingback: Implementing ‘Show Your Google Analytics Top Content in Wordpress’ | Okada Design Blog

  25. Okay, i have been trying to get your Plugin to work with my WordPress installation but i cant. I have already included the text into the footer.php file.’

    Whenever i use plain text as the language it will convert my ” into " you can see it on my blog for now. Any idea how to resolve this issue?

    • [text]This is a test of "quotes" using the [ text ] shortcode (with no spaces).[/text]

      ^ Works fine for me as you can see. Try disabling all other plugins. Perhaps one of them is causing it.

  26. Pingback: SyntaxHighlighter Evolved | kairos

  27. Pingback: Posting Source Code in Wordpress « Skrakes.com

  29. Pingback: Adaug? butoane personalizate în editorul HTML | WP Tuts

  30. does this work with objc ?

    [objc]
    – (void)loadView {
    CPLayerHostingView * newView = [[CPLayerHostingView alloc]initWithFrame:[[UIScreen mainScreen] applicationFrame]];
    self.view = newView;
    [newView release];
    }
    [/objc]

  31. First off I want to say that this is a great plugin and I think it’s one of the best wp syntax highlighters out there. The problem I have though is that it seems to add an extra href whenever there is a link in my code. It also adds span tags to the beginning and end. Is there any way to get rid of these two things? Sorry if this is a stupid question.

  32. Pingback: Jack Altiere » Blog Archive » Blog Setup

  33. Pingback: ????????? ??????? PHP+JavaScript+HTML+CSS » ??????? ??? ????????? ???? ? WordPress’?

  34. Any ETA on a release date to fix that bug? To the best of my recollection it is the first real bug in a long time.

    • I’m super busy, but I’ll try and fix it when I get a chance (and figure out how to do it). It shouldn’t affect code in posts though (which is where the vast majority of users use this plugin).

  35. Pingback: A Wordpress Plug-in to display Code « Jake Belfry's Internet Marketing Blog

  36. Pingback: ??? / ???????????????WordPress???????????? « ????????

  39. Awesome plugin!
    But could you add the Lua code highlight to this plugin?
    I really like your plugin,it’s pretty,so I won’t change to use other syntax highlight plugins.
    Any way,thank you all the same.

  40. Hello !

    First of all, I want to say, that your plugin is awesome. I tried a lot, and your’s my favourite
    But, there is always a “but” ^_^

    I would like to know if there is a possibility to modify the width of the highlighted text
    I know that it is possible to modify it in shCore.css, but it is for all code
    I want to modify width for only some blocks of code, not for all

    I had a look to the Shortcode Parameters, but, no ‘width’ one
    I hope that you can help me 😀

    Lord, from France (so I apologize for the rusty english !)

  41. Great plugin. Just one thing.

    For a very short while before the page is fully loaded, the initial aspect my theme gives to tags will appear, and then be replaced by the correct format.

    Is there any solution to that ?

    • No because the highlighting is done client-side (in the user’s browser). The Javascript has to wait for the page to finish loading before it can go and find all of the code blocks and spruce them up.

  42. Pingback: Scott's Blog - Installed the SyntaxHighlighter Evolved plugin

  43. Pingback: ???????? ????????? ??????????? ? WordPress

  44. Pingback: Railscast style syntax highlighting redux | David Peterson

  46. Pingback: Wordpress Plugins I Can’t Live Without « Josh Nunn's Geekorium

  47. Pingback: Nephandus » Blog Archive » Teaching An Old Dog New Tricks

  49. Thanks dude for the wonderful plugin, works really fine.

    Question: I woul dlike to manipulate the margin-top, is that to be done on the plugin or on the environment through css.sty – any pointers?

    Greetings,
    DS

  50. Hi Viper,

    Is it possible to display shortcodes with this plugin e.g.

    [code][button link="#"]Insert text here[/button][/code]

    As you can see I want to show the user how to type short codes, but not actually generate them. At the moment the short codes are parsed and this is displaying instead in the syntax highlighter:

    Click Here

    • That’s because my plugin has to cheat a bit and run it’s shortcode a bit earlier than normal to avoid stuff going bad.

      However WordPress has a built-in way to avoid shortcodes being rendered: double-wrap them like so: [[shortcode]] (at least that worked last I tried it)

Comments are closed.