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:
- Download from WordPress.org (0 downloads)
GitHub:
This plugin is available on GitHub. Issues, patches, and pull requests are welcome.
Pingback: st3v3nhunt » Gists begone
Hello,
In the Settings, the Toolbar option is ticked.
However, when I pass my mouse on the top right of the code, nothing’s happening …
Do I need to specify a parameter in the shortcode ??
example: http://www.geekmindsthinkalike.com/sbm-find-users-associated-with-roles/
Thanks
Pingback: Syntax Highlighting « Underflow Blog
Pingback: 10 Must Have Wordpress Plugins | Blog of a geek
Pingback: 6 important Wordpress plugins highlight source code | Watpads - Blogging Tips and References
First up, great plugin…second, just one thing holding up a greenlight for validation…I get this:
Bad value syntaxhighlighter-version for attribute name on element meta: Keyword syntaxhighlighter-version is not registered.
Is there a way to remove that without modifying the core plugin code?
Thanks in advance!
Extremely useful plugin! Two questions:
How is one supposed to use the [code]classname="myclass"[/code] attribute? It shows up as [code]class-name: myclass;[/code] but I haven’t found any way to use this from CSS, is that what it’s for and what would the syntax be?
Similarly, how does one use the class added to “Additional CSS Class(es)”?
I’m running plugin v3.1.3 and WP v3.2.1.
Thanks!Kristian
Pingback: WLW Code Plugin + SyntaxHighlighter Evolved ?WLW???????????????????WordPress de SEO ?????
Love this site. I really need this syntax highlighter.
Fantastic plugin; however, it doesn’t appear to be inserting linebreaks and tabs for me automatically. If I add linebreaks to my code, it inserts [code][/code][code][/code] in the text. If I don’t, it puts it all on one line. My website link is an example. I did read on the SyntaxHighlighter that ignoring line breaks is an option – could be a nice option for this plugin.
That didn’t work. It literally inserts a br tag into my code on each line.
Douglas, that’s rather strange: line breaks are so essential to any code that if this plugin didn’t support it, it would not have been released. I wonder if you’re experiencing the same issue I’ve just found on one of my blog posts using SyntaxHighlighter: http://elabz.com/serial-oled-display-and-arduino/
I looked at it today and realized that all quotes (“) and angle brackets () as well as ampersand symbols (&) have been converted into their HTML-encoded equivalents. That completely destroyed the code.
When I looked at the post edit screen, I realized that at some point in editing the post I (accidentally, of course 🙂 ) switched WP’s “Edit Post” feature into the visual mode and that’s a big no-no when using a plugin like this that does its own text processing.
Make sure the visual mode (when WP tries to render the post as it will look like when published) is always off when you plan on having ANY code in that post, with SyntaxHighlighter or without. I wish there was a hack to simply remove the “visual” link from the editing screen.
In fact, I think the very same thing is troubling shmoula, the commenter that posted right after you (see below)
Cheers!
I had the same problem and the problem was caused by the interaction between your plugin and the Raw HTML Plugin.
If using the Raw HTML Plugin make sure on the edit page you check the following boxes in its widget:
[x] Disable wptexturize
[x] Disable automatic paragraphs
[x] Disable convert_chars
[x] Disable smilies
Only then will the syntax highlighter plugin work properly!
Quinxy
Hi, why your plugin doesnt render [code][sourcecode][/code] blocks properly in bloglist? When I open one blogpost, everything is OKay (check out my website to see this problem).
In opened blogpost:
[code]<pre class="brush: java; title: ; notranslate" title="">package cz.shmoula.klient;
import java.net.Authenticator;
…[/code]
And in blogposts listing:
[code]<p>[sourcecode language="java"]package cz.shmoula.klient;</p>
<p>import java.net.Authenticator;<br />
import java.net.PasswordAuthentication;</p>
…[/code]
Where can be problem?
Václav, it has to be written as
[code]
[code language="java"]
…
wsdlLocation = "META-INF/wsdl/myService.wsdl")
…
[/code]
[/code]
not as you did it:
[code]
[sourcecode language="java"]
…
wsdlLocation = "META-INF/wsdl/myService.wsdl")
…
[/code]
[/code]
and I’m sorry, I have no clue if Viper007’s implementation of WP comments will render what I just wrote above correctly, but the jest of it is: simply use “code” instead of “sourcecode” in your tags.
Cheer!
Hi ElectroNick, thanks for your reply. I tried to change sourcecode tags to just code, but it acts still the same. Have a look at http://www.shmoula.cz/blog/ if you wish and have some time – you’ll see “unrendered code boxes”, but if you open for example the first blogpost on page ( http://www.shmoula.cz/komunikace-se-zabezpecenymi-webovymi-sluzbami/ ), there it’s rendered correctly.
Many thanks in advance
I’m not seeing the <pre> tags on your blog home page but they are on the post page. So, the JS does not know which part to render as code.
See if there’s some kind of a plugin that suppresses conversion of [code][/code] tags. I’m not sure what it may be and I don’t post code on the front page myself – it’s normally too bulky for the front page and I end up always putting it AFTER the <!–more–> tag. Anyone else here posts code in the header of the post?
well, !–more– is maybe the solution, but when i want to keep whole posts?
Pingback: 6 Important Syntax Highlighter WordPress Plugins | Desua the world of Knowledge
Pingback: SyntaxHighlighter Evolved | WordPress Designer
How about inline syntax highlighting, i.e. what if I only want to highlight “echo myFunc()” within a whole block of text, but don’t want to put it into a separate line?
I don’t believe the highlighting script supports that. It wants to use
<pre>tags which are block elements.Hey,
Thanks for a great plug in. Been using it sucessfully with a very basic theme for quite some time. I recently got a more advanced theme that uses a lot of shortcodes and one of them happens to be [text][/text][/text]. Syntaxhighlighter also uses this so the entre site gets “syntax highlighted :-)”. Is there an easy way of removing a shortcode? I wish there was an area for this in the settings panel.
Thanks,
/Christian
Pingback: ????????? WordPress ????? (19 ?) | attosoft.info Blog
Pingback: LuckyPeaks.com – BLOG
Pingback: SyntaxHighlighter ? Diff (??) ???????????????????? | attosoft.info Blog
Pingback: ????SyntaxHighlighter Evolved ???? (??????) | attosoft.info Blog
really cool plugin!
a pleasure to use indeed
especially after nightmare of buggy SyntaxHighlighter (not Evolve)
Pingback: 20 plugins Wordpress indispensable!Mémo outils linux
Pingback: Cool and very useful plugins a wordpress blog must have « Digital Buddy
So, in this plugin there are notice that “Don’t use the Visual editor if you don’t want your code mangled. TinyMCE will “clean up” your HTML.” What do you recommend to use?
Please I´m having problems.
Use the HTML tab instead if possible. It won’t touch your formatting at all.
But my site is shared with many contributors and I’d like to help to write better. If not have to how, tkz
I think the solution is rather easy. Just do all your fancy formatting in WYSIWYG mode if you have to but do it BEFORE inserting code. If your code is the last thing you insert and after you insert it, you keep the editor in HTML mode, all your fancy formatting will be safe.
I can’t get it to not strip line breaks. I have tried so far:
Unchecking “WordPress should correct invalidly nested XHTML automatically” under the Settings/Writing tab
Installing Advanced TinyMCE, and checking the “Stop removing tags …”
Not switching to the visual tab at all.
I create a new post, switch to html tab, and enter the following:
[php]
<?php
$var = "hello world";
echo $var;
[/php]
I save the post, and instead of seeing 3 lines, I see 1. All of the code are inserted into a single line, linebreaks stripped.
Any ideas?
If the post itself is changing, then it’s another plugin issue. If the post looks correct when editing but displays wrong, then it’s a theme CSS issue.
When editing the post, it the code block does not get styled, but it looks correct, regarding the line breaks. (I believe this is the correct behavior?)
When viewing the published post, the code block gets styled, but strips linebreaks.
I will try a different theme.
Switching the theme did not help, but looking at it, I don’t think it’s a style issue. Looking at your code block here, each line gets a seperate div, eg.:
But on my page, there is only one div like this.
Can you give some advice on where I should start tracking down this? I’d really like to use this plugin.
Sorry, nevermind, I just tried another plugin which uses the same JS library, and that produced the same problem. I have switched to CodeColorer which does the parsing on the server side (with Geshi), and it works.
Alex,
Just want to say Kudos on this plugin. I gave it a write up on my site and use it all the time.
Cheers mate,
Richard
Hi Alex,
is it possible to use a vertical bar and limit the numbers of lines shown to say 10-20 ? I know I could use collapse, I would prefer however a solution that will show a part of a very long code and will let the user scroll down for the rest.
Thanks,
Sol
You could likely accomplish this using CSS and a
max-heightparameter. There’s no built-in way to do this though, sorry.Thanks,
could you tell me where in the style file I need to add max-height=10px for e.g. ?
You can probably just add it to your theme with an
!important.Pingback: ??????????????????WordPressPlugin! « leocao
Pingback: [WordPress] ?? Syntaxhighlighter Evolved ???????? | victorgau.com
Hi.
I have this installed, and LOVE IT! However I cannot figure out how to:
1. Show alternate line background (white and light grey)
2. SHow the PRINT and COPY buttons as in the screenshots of this plugin
Any pointers?
Thanks!
Pingback: Rotator header sul blog « LucaVallongo.com
Pingback: WordPress?????????????????? - I'm Hungry ~web??~
How can I disable line numbers from showing up? I can see the tags in the documentation, but this does not work with the light tag in it.
[sourcecode language=”php” light=”true”]<?php /* Start the Loop */ ?>[/sourcecode]
Thanks.
As you can see, it works on my blog. 🙂
You can also try
gutter="false".Pingback: ??? ???????????? Syntax Highlighter - ????????? ???? ???????? ???? ???????? ???? : ????????? ???? ???????? ???? ???????? ????
Pingback: Makale Yaz?m Standartlar? | Geli?tirici Günlü?ü
Pingback: Best Plugin to Display Syntax-Highlighted code in WP : WP Mayor
very cool plugin! in my wp install, 4 zeros appear before the line number… is this something weird happening on just my site, I noticed you dont have 0’s in your line numbers… any way to remove the zeros???
Also, when I copy the highlighted code (instead of opening in plain text with the toolbar), it copies the line numbers along with the code. Im confused why its so different on my site, its PERFECT on yours.
There is a setting to control line number padding. Perhaps you turned it on by accident?
Can you provide a URL to where this is happening on your site so I can see it for myself?
That was exactly it Alex, thanks for responding so quickly! I set Line Number Padding to 0 and those zeros disappeared! Thank You!
I figured out the other issue too. Version 3 eliminates that pesky line number copying, but I’m not willing to lose line wrapping, and i really like the toolbar in version 2.x – so they can just click the copy button 😀
Heres an example of where Im using it. http://digitalrenewal.com/jquery-form-for-wordpress-to-allow-author-login-complete-wordpress-tutorial#jquery
It looks fantastic now thanks to your plugin. I edited the stylesheet, but couldnt get the function to add a new theme working, so I just overwrote your default css (shame on me) The new stylesheet was available in settings, but didnt render on the page, so im guessing it has something to do with my path?
Thanks again for such great support. I’ve always loved your work.
Pingback: Best WordPress Plugins to Display and Highlight Code within your Blog - Freelancer Gang
Pingback: Làm ??p code trong blog v?i SyntaxHighlighter
Pingback: | ISSACY
Hi all!
I am using these 2 plugins:
HTML Page Sitemap
http://wordpress.org/extend/plugins/html-sitemap/installation/
SyntaxHighlighter Evolved
http://wordpress.org/extend/plugins/syntaxhighlighter/
When activating SyntaxHighlighter, HTML Page Sitemap won’t render anymore (no output created).
Any idea as to why this may happen?
It’s weird because I’d assume these aren’t really playing in the same space…
Help is appreciated!
Have a good day!
Answered here: http://wordpress.org/support/topic/plugins-wont-coexist
Pingback: ???????????WordPress??????SyntaxHighlighter Evolved???? | SpiralCode
Pingback: 6 ?????? ???? ????? ?? ?? ????? ?? | ??? ??????
Pingback: syntaxhighlighter for wordpress | punker76
Pingback: En iyi WordPress Eklentileri | sesligrafik,Android Haberleri,android,sesli,haber,magazin
Pingback: ????????? ?????????? ? WordPress. ????????? ?????? | Geega
Pingback: PHP???????1_??2 | hmd blog?maco???
Pingback: Moving away from WordPress.com and 10 must-have WordPress plugins » Sam Huggill's Weblog
Pingback: ??????????????WordPress?????? | YOUTEM BLOG
Pingback: SyntaxHighlighter Evolved Style Plugin - Phil Kovacs
http://www.philkovacs.com/syntaxhighlighter-style-plugin/
I’ve created a small plugin for editing custom themes for Viper’s plugin. The goal was to separate custom themes from the main plugin so that upgrades don’t clobber hacked themes and to disconnect the loading of the syntax themes from any WordPress theme-specific files, so you can change WordPress themes without affecting the your syntax themes in any way. Hope you find it helpful.