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: We Know NothingWord - We Know Nothing

  2. Will it be possible to use custom colours for background based on existing theme colour scheme? If you add the feature, it will be really appreciated.

  3. Olá Alex,

    Eu terminei a tradução do seu plugin 3.1.1 para Português Brasileiro.
    Gostaria de saber como faço para enviar estes arquivos (syntaxhighlighter-pt_BR.po, syntaxhighlighter-pt_BR.mo) para você e se você pode incluí-los na próxima versão do seu plugin.

    Obrigado por sua atenção.

    Atenciosamente,

    Vinny

  4. Ops! Sorry, my previous comment it’s in my native language!

    Hello Alex,

    I finished the translation of your plugin 3.1.1 for Brazilian Portuguese.
    I wonder how do I send these files (syntaxhighlighter-pt_BR.po, syntaxhighlighter-pt_BR.mo) for you and if you can include them in the next version of your plugin.

    Thank you for your attention.

    Sincerely,

    Vinny

  5. Pingback: 10 Essential WordPress Blog Plugins | BLOGOOLA

  6. When Highlighter Version in WordPress plugin SyntaxHighlighter Evolved 3.0.11 is set to version 3.x and the codes consist of only one or two long lines, few or no codes can be seen because the scrollbars occupy most of the spaces. I consider this as a bug. Would you please fix it.

  7. I’m working on improving the speed of my site. Is there a straightforward way to combine the 2-3 *.js I use routinely into one so as to reduce the number of server gets?

  8. @Alex (Viper007Bond)

    I am using the version 2.x and unchecked “Wrap long lines (v2.x only, disabling this will make a scrollbar show instead)”. However, on Mozilla Firefox the toolbar is not appearing and the code line is long so the some part of the code is hidden.

    See the actual example: http://hellotecnologia.com/blog/programacion-2/como-hacer-que-las-imagenes-destacadas-de-wordpress-sean-cliqueables/.

    [code][/code] [php] <?php the_post_thumbnail(array(260,200), array("class" => "alignleft post_thumbnail")); ?> [/php] [code][/code]

    • Try temporarily switching to the default theme. I suspect it’s something in your theme’s CSS that’s interfering. I’d also temporarily disable wp-minify.

      Although if you don’t need line wrapping, why not use the better 3.x version?

  9. @Alex (Viper007Bond)

    I disabled the wp-minify. I have checked “Display the toolbar”. But the display bar still not appear. Why once I checked “Display the toolbar” a green question mark appear? That questions mark hide the code. I tried using a default template as you suggested but the same.

    I am using the version 2 because that version display “view source”, “display”, “print”.

    Using Version 2:
    http://hellotecnologia.com/using-version2.png

    Using Version 3:
    http://hellotecnologia.com/using-version3.png

    Using Default Template:
    http://hellotecnologia.com/using-default-template.png

    • Version 3 doesn’t have a toolbar as it doesn’t need one. Unlike version 2, you can just highlight and copy/paste the code you want without getting the line numbers. Therefore the toolbar is no longer needed (the green question mark is technically the toolbar and that’s the “about” button).

  10. Pingback: I 30 plugin principali per un blog professionale wordpress | drgeekyll.com geek blog web design programming wordpress joomla facebook twitter zend framework iphone windows phone 7 android

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

  12. @Alex (Viper007Bond)

    Ok going back to the main problem… If I use the version 2 everything work well. However, with version 3 my code get hidden and don’t show “view source”, “display”, “print”. How can I solve that issue?

  13. I’m having a little problem here: the size of the letters of the codes that are “transformed” using this plugin are just too big (even bigger than the normal text), and that’s making me very angry, ’cause I just can’t solve it!

    I use the Twenty Ten 1.1 theme. When I tested in other themes, it went right!

  16. Pingback: Les plugins WordPress indispensables pour réussir son blog | Développement Web, Webdesign, SEO, Multimédia - Guillaume Voisin, Ingénieur Web

  18. Pingback: List of Wordpress Plugin « Hello!PEng

  19. Hello.

    I wanted to make the comments in my php code be changed into gray, because when I put comments (either [code 1=”*/[/code” language=”/*”] or [code]//[/code]), it is just too similiar to some other types of codes…

    Where should I change the color in the Syntax files?

  20. Pingback: WordPress????????????????? | ????

  21. Pingback: Plugins That We Recommend - SyntaxHighlighter Evolved | TheThe Fly

  22. Pingback: Wichtige Wordpress Plugins | i-mill

  24. Pingback: 7 przydatnych pluginów / fixów do wordpressa | wordpress frontend & css tips - 960Pixels netpress

  25. Love the plugin but it stopped working on update to WordPress 3.0.1. I’ve noticed that the syntax highlighting on this page is gone as well. No matter what browser, everything appears to not be highlighted and I was wondering if this was an issue that was being resolved?

  26. Pingback: Daniels Blog » Blog Archive

  27. Pingback: WordPress??????SyntaxHighlighter Evolved | ????——???????

  28. Thanks for taking a look, I can honestly say it was surprising and very nice to get the attention to my comment. Correction from the previous post, it’s not working when I view it in Google Chrome (Build: 10.0.612.1). I checked it in IE and Firefox and it displays fine. I was not able to get a 404 on that file but, again thank you for checking.

  29. Pingback: jphoton » Blog Archive » First Post

  31. I’m looking for a source code plugin for my WordPress blog that looks better than the plain ‘Preserve Code Formatting’ that I’m using now so I tried Syntax Highlighter Evolved (V 3.1.1). It works great for Java but it mangles XML. It turns all the >’s and <'s into &gt's and &lt's, etc, Here's a screenshot:
    http://blog.nelsondev.net/images/SH_Evolved_1.jpg

    The original XML looked like
    [code]
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&quot;
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Audio experiments">
    </TextView>
    [/code]

    Suggestions? Thanks in advance.

  32. BTW, on my prior post I put my XML sample between [code]blah[/code] ‘s as you suggested and it mangled that in a different way, namely it added a HUGE amount of extraneous content on line 2!! Basically everything after “http://schemas.android.com/apk/res/android” shows up as lots of javascript.

    That’s on Firefox. In IE it only gets as far as the quote mark just before the http before it goes off the rails.

    Thanks in advance for clarifying what’s going on.

  34. Pingback: Show Code In WordPress: The Syntax Highlighter Plugin | Richard Cummings

  35. I’m a freshman for using this plugin.
    It is a great one! Very nice! But there seems to be a fly in the ointment.

    The W3C HTML Validators tell me there are some errors in my site.
    ——————————————————————
    Line 34, Column 10: there is no attribute “id”
    <meta id="syntaxhighlighteranchor" name="syntaxhighlighter-version" content="3.1.1"

    Line 192, Column 25: character ";" is not allowed in the value of attribute "class"

    ——————————————————————
    I hope you will fix these small issue in the following versions.
    Thanks.

  36. Sorry, I just forgot to pay attention to “&lt?”.
    The Correct information is as following:
    ——————————————————————
    Line 34, Column 10: there is no attribute “id”
    <meta id="syntaxhighlighteranchor" name="syntaxhighlighter-version" content="3.1.1"

    Line 192, Column 25: character ";" is not allowed in the value of attribute "class"
    <pre class="brush: plain; title: ;" title=""
    ——————————————————————
    Thanks

  37. Pingback: ?????? ?? « Lindsey@BLOG

  38. Pingback: css:manufaktur » Blog Archiv » Quellcode anzeigen

  39. Pingback: Migrating from Blogger to Wordpress | Adam Foltzer's Blog

  40. Pingback: Code display and highlight plugin for WordPress – Cybersam

  41. The syntax highlighting is working awesome for me. I just wanted to know, are you planning on updating Objective-C support, as iPhone/Mac development is increasing, so are the blogs.

  42. Pingback: Snippet: Last post’s excerpt on category.php (Wordpress, php) « Franz Moser's Blog

  43. Pingback: Novi pluginovi « Nivas.hr blog

  44. Pingback: Category title and Posts included (Wordpress, category.php) « Franz Moser's Blog

  45. Pingback: Current Category and List of Posts included (Wordpress, category.php) « Franz Moser's Blog

  46. Pingback: Wordpress Series – Plugins, what do you use? « Engage In SharePoint

  47. Pingback: 10 Best Syntax Highlighter Wordpress Plugins | TutorialChip

  49. Pingback: How to Display Code in WordPress Posts « MT Web Solutions

Comments are closed.