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: 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…?

  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.

    [code]<pre> … </pre>[/code]
    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?

  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

  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.

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

  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

  30. Hi,
    I’m using SyntaxHighliter for wordpress, but I found that it didn’t work in my own theme. I put the [php][/php] 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:
    [code]<pre class="brush: php; title: ; notranslate" title>code here</pre>[/code]
    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

  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:
    [code] overflow: auto; max-height: 200px;[/code]

    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

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

  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)

Comments are closed.