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.
Download:
- Download from WordPress.org (179,980 downloads)
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:
[tag light="true"]your code here[/tag]
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.
[...] 1. SyntaxHighlighter Evolved [...]
[...] WordPress.org yang ingin menampilkan source code di self-hosted blog Anda, dapat memasang plugin SyntaxHighlighter Evolved yang di develop oleh Alex Gorbatchev dan Automattic di sini. Share this:DiggEmailLike this:LikeBe [...]
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…?
The code inherits its font size from your theme. It should be the same size as the text in your posts. If it’s not, then it must be something in your theme’s
style.css.[...] ayer, venía usando el plugin de SyntaxHighlighter Evolved para escribir código dentro de los artículos pero me di cuenta que había veces que (seguramente [...]
[...] Link para saber mais! [...]
[...] Better Delete Revision Page Links To SyntaxHighligher Evolved [...]
[...] SyntaxHighlighter Evolved [...]
[...] ??????code???????SyntaxHighlighter Evolved???????live writer???PreCode Code Snippet Manager??????????????? [...]
> TIP: Don’t use the Visual editor if you don’t want your code mangled.
> TinyMCE will “clean up” your HTML.
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?
[ code] … [/code ]
[ code] … [/code ]
Sometimes it is not easy with this code tags.
I enabled the SyntaxHighlighter plug-in, WordPress default editor can not load button, this is why? Referrals to help
[...] SyntaxHighlighter Evolved [...]
[...] ????SyntaxHighlighter Evolved???????????????????????? [...]
I’m using Genesis child theme, now Syntax highlighter not working, just output is code inside box.
[...] ??????????? SyntaxHighlighter Evolved [...]
[...] ??????????? SyntaxHighlighter Evolved [...]
[...] ??????????? SyntaxHighlighter Evolved [...]
[...] that will highlight and format code snippets inline with text. To fill this need, MFS has selected SyntaxHighlighter Evolved by Alex Mills (aka Viper007Bond), which in turn is based on the work of Alex Gorbatchev’s [...]
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
I’m not the author of the Javascript package, just the WordPress implementation of it (shortcodes, properly handling encoding, etc.).
You’ll want to submit feature requests upstream: http://alexgorbatchev.com/SyntaxHighlighter/
[...] better, when I started this blog I decided to use the SyntaxHighlighter – by installing the SyntaxHighlighter Evolved WordPress plugin. This allowed me to simply add ColdFusion code by simply wrapping the code in [ cf [...]
[...] ???????????SyntaxHighlighter Evolved???? [...]
[...] Evolved ?????3.1.3http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/WordPress3.3.1 [...]
[...] ???????????????????? Free WordPress Templates. Best WP Templates.??????????Think_Linux????????????????????????w Exec-PHP???????????????????????????????????????????????????????????????????????????function.php?????????????????????PostPost?????????????????????????????????????HTML??????? ??????SyntaxHighlighter Evolved???????????????????????????????????????????????????????Dynamic To Top????????? ????????????????????????????????????????? ???????????????????????? Shadowmaker: Boxset / Running Wild??3,529???????? 30 Years Anniversary-in the Power of Now / Holy Moses??2,297???????? Kill Devil Hill [Analog] / Kill Devil Hill??3,529???????? document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//kawayan.net/&nsid=91317691708609083%3A%3A91317788345389046&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E")); ????(??????w)Amazon???? ???????/CIRCLE TEMPLATE 1218T 588200 ????????????WordPress 3.x????????? (Web Designing Books) The Template *{margin:0; padding:0;} #socialbuttonnav li{background:none;overflow:hidden;width:65px; height:80px; line-height:30px; margin-right:2px; float:left; text-align:center;} #fb { text-align:center;border:none; } [...]
[...] Evolved?????3.1.3http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/??????????????????????????<br [...]
How do you create a custom theme so it shows in the theme dropdown?
See http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/adding-a-new-theme/
I have been searching for a good plugin, and this looks very nice! I will try it and most likely use it on my own website!
thanks!
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.
I believe that was a feature of v2.x of the highlighter. You can switch to it from the settings page.
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.
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.
[...] ??????????????????SyntaxHighlighter Evolved ??????????SyntaxHighlighter TinyMCE Button???????????????????? [...]
[...] Syntax Higlighter evolved: for source code highlighting [...]
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
If you want to display shortcodes and not render them, then you need to escape them.
See http://www.viper007bond.com/2011/08/13/displaying-shortcodes/
i.e. do this:
[[button link="#" variation="teal" size="large"]Your Text[/button]]Dear Alex,
Duh? what was I thinking? Thank you so much for the reminder, must have been very tired.
Thanks again
Tim
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:
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
You’re missing a required theme hook that every theme should have.
http://wordpress.org/extend/plugins/syntaxhighlighter/faq/
Yeah I got it, thanks a lot!! I’m just a rookie at making a theme…
[...] SyntaxHighlighter Evolved [...]
[...] meta tags to your pages and feeds, disable unused archives and nofollow unnecessary links. 17. SyntaxHighlighter Evolved Easily post syntax-highlighted code to your site without having to modify the code at all. 18. [...]
[...] SyntaxHighlighter Evolved???????????…… [...]
[...] ? ??. (? ??????? ?? ?????? ?????? ?? ????? ??????) [...]
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:
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
Add
!importantto your CSS declarations.Thanks for the reply, im not entirely sure what you mean. Do you mean add this to my style.css? Where do i need to add it?
Thanks
P.s. Sorry for the lack of wordpress/css/php knowledge
Yes, adding it to your
style.csswith the correct classes (.syntaxhighlighterif I remember correctly) and!importantmay do the trick. I’m not sure, you’ll need to fiddle with it.How to make a toolbar in the screenshot?
http://u.to/tyR8AQ
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.
[...] ???????????????????? SyntaxHighlighter Evolved ?????3.1.3???????????? [...]
[...] Syntax Highlighter Evolved????????????? ??????HTML??????????? [...]
Why don’t you have any examples of how to use the plugin on this page?
Because it’s documented on the bottom of the plugin’s Settings page and I also link to documentation that I have written over on WordPress.com.
I’m currently working on a redesign of our blog. I bought the dynamix theme from themeforest. Now all pre tags are not rendered correctly anymore. Any ideas how I can overcome this issue?
http://www.redesign.planetgeek.ch (top most post for example)
Thanks
Hy Alex
Just wanted to inform you that I solved the issue. It was interference with the W3 Cache plugin. I disabled the w3 Cache plugin and now it works.
Daniel
Great script.Is it compatible with Canvas Woo Theme?
Thanks!
[...] and I found myself wondering if Alex Gorbatchev’s SyntaxHighlighter supported PowerCLI. The WordPress plugin I use (courtesy of Alex Bond) had a Powershell plugin but no PowerCLI. Time to create! I’m by no [...]
Hi Alex!… I found something with SyntaxHighlighter Evolved plugin for WordPress, i don’t know it bug or not please check http://www.all-info4you.com/2012/02/24/syntaxhighlighter-evolved-versi-3-1-3-wordpress-versi-3-3-1-bug-not/. it’s Indonesian you can translate it.
[...] http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/ [...]
[...] SyntaxHighlighter Evolved – Facil sintaxe para destacar o código do seu site. Visitar o site do plugin [...]
[...] SyntaxHighlighter Evolved – Facil sintaxe para destacar o código do seu site. Visitar o site do plugin [...]
[...] SyntaxHighlighter Evolved – Facil sintaxe para destacar o código do seu site. Visitar o site do plugin [...]
[...] use WordPress for this web site. To pretty up source code examples in my posts, I use the excellent SyntaxHighlighter Evolved WordPress plugin. The WordPress theme I use, Fluid Blue, does something with its CSS such that it [...]
[...] är. Det är en helt vanlig installation av WordPress och det enda plugin som används är SyntaxHighlighter Evolved. Detta är riktigt bra för att visa kod i blogginlägg. Temat är baserat på HTML5 Boilerplate, [...]
[...] ??SyntaxHighlighter Evolved???????? [...]
[...] Viper007Bond [...]
[...] Viper007Bond [...]
[...] Viper007Bond [...]
[...] 1.?????SyntaxHighlighter Evolved ??? ???? ? [...]
[...] Viper007Bond [...]
the toolbar is not showing, what should the code look like, I have
if i want to add attributes how do I enter them, basically what would it look like…
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
1) Make your own theme: http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/adding-a-new-theme/
2) Nope, I have no plans for fork the Javascript packages. I’m just maintaining a WordPress implementation for them.
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
[...] Viper007Bond [...]
[...] antes de dar con éste resultado, utilizaba el plugin “sintax highlighter“, pero con ésto, podré utilizar mis códigos en PasteBin y [...]
[...] Original by: Viper007Bond.com [...]
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!
Glad you like it!
[...] Viper007Bond [...]
[...] wordpress??????synaxhighlighter??????????HTML?????????????????????????? [...]
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.-
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.
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.
Frankly I don’t know. I never use TinyMCE — I exclusively use the HTML view.
I almost forgot…
Thank you for writing a sweet plug-in and letting people use it for free-ninety-nine
[...] Platz 9 – SyntaxHighlighter Evolved [...]
[...] SyntaxHighlighter ?????????????? SyntaxHighlighter Evolved?????? (??????????) [...]
[...] ????????? SyntaxHighlighter Evolved ? Syntax Highlighter for WordPress ???? SyntaxHighlighter [...]
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.
Hmm, looks fine here in Firefox when I hit print preview.
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.
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.
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
Try disabling the minification plugin that you have enabled or lower it’s footer hook priority. It’s outputting after my plugin’s Javascript which means that my code throws an error because the Javascript files it needs to work aren’t loaded yet:
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.
[...] ??jQuery????????????????????????????????????????????????SyntaxHighlighter Evolved????????????????????????????? [...]
[...] ??????Wordpress??????????????????? ????????????????????Syntaxhighlighter Evolved?????? [...]
[...] SyntaxHighlighter Evolved – ??????????? [...]
[...] utiles : Sur Worpress.org Sur le site de l’auteur Publié par DeTraX à [...]
[...] Embedding code in WordPress posts 0 .breadcrumb a{ color:#5dc4f6; } .breadcrumb a:hover{ color:#ff9900; } source code » wp » Embedding code in WordPress posts Tweet !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); Unfortunately, you can’t simply copy and paste code into WordPress posts (or standard web pages either). If you try to do this, the server will try to execute the code, so the code that you have posted will not show up, or you’ll get unexpected results at best, depending on the type of code that you’re trying to post. Fortunately, there are numerous ways to get around this issue and display code in WordPress posts. Which of these ways you decide to use is entirely up to you; each method has its own pros and cons that you should be aware of. HTML TAGS You can use <code> and <pre> tags to wrap around your code, but this approach often becomes problematic, especially when dealing with large code blocks. I would recommend this method only if you are you displaying a line or two of code. THIRD PARTY SERVICES Third party services, while looking good might not give you the SEO benefits that you’re looking for, and they may require extra maintenance work when it comes to editing your code snippets. In addition, you’ll have to go back and forth from your post to the service, even for the slightest code changes. Other disadvantages include possible service downtime and SEO may become problematic since your code will not get indexed by search engines. WP PLUGINS There are a variety of plugins available DOWNLOAD SYNTAX HIGHLIGHTER [...]
This plugin is working fine
But the problem is in adding html code
used html parsers and did everything i can but still the html code is messed up
please help
[...] SyntaxHightlighter Evolved:???????????????????????????????????WLW????????? [...]
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.
[...] Evolved Viper007Bond 17/11/2011 [...]
[...] Liens utiles : Sur Worpress.org Sur le site de l’auteur [...]
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.
Glad you like the plugin.
Not sure why that code is there. I must have left it there while trying to get the code working. I’ll remove it from the next release.
Hi, I love your plugin but I have a problem:
In my homepage not work but in the single post page work.
Could you help me?
Thank you
Eclipse
Sounds like you’re using excerpts on your homepage maybe?
I don’t use excerpts, do you know if there are conflicts with other plugin?
I just checked out your homepage the code was highlighting correctly for me in Firefox.
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
[...] Viper007Bond [...]
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.
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 ?
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.
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.
Probably it’s minification functionality. If you disable that, I bet it’ll work fine.
EDIT: I just saw your other comment. Yeah, the minification is probably breaking the Javascript somehow.
[...] because its intrinsically great for writing technical articles. For posting code, I use the SyntaxHighlighter Evolved plugin. The problem is that the CSS for the Fluid-Blue theme conflicts with the CSS for the [...]
[...] Eklenti sitesini ziyaret et [...]
[...] SyntaxHighlighter Evolved que te permite introducir código en tus posts de una manera sencillísima. Se utilizan unos tag con corchete como estos: [sourcecode language="css"] /* Colocas Tu código aquí, Dentro de las etiquetas sourcecode */ div{ margin: 0; padding: 0; border: 0; } [/sourcecode] [...]