StylizedWeb is a web design trends and tutorials blog, maintained by Ross Johnson who also runs a web design company and design blog.

Categories Archive

Popular Posts
Advertisement
Premium WordPress Themes, Theme Galaxy Basecamp
Najbolje ponuda IT poslova u Srbiji na itposlovi.info Advertise on Stylized Web

Syntax Highlighter

add to Save to Delicious Save to Stumble Save to Digg

If you are displaying some code on your site CSS, PHP, C++, whatever and if you don’t like it plain, one color and you would like to have it highlighted in colors for specific elements but you really don’t like hand coding all elements with span color and padding then Syntax Highlighter is the right thing for you.

Vector people

This feature eases writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Here are some free examples for it, compatible with WordPress to.

Google Syntax Highlighter for WordPress

This one I think is the best of them, written by Alex Gorbatchev, and it’s written in Javascript. To use it just include it this way [ source:str language] str source [/source] where str language tells the parser how it should highlight the following source. Currently, the following strings are understood:

  • css
  • c#, c-sharp, csharp
  • c, cpp, c++
  • vb, vb.net
  • delphi, pascal
  • js, jscript, javascript
  • php
  • py, python
  • ruby
  • sql
  • xml, xhtml, xslt, html, xhtml

Don’t forget to activate support for the language(s) you want to display. Do this by going to the WordPress-Administration Options-Menu and click it active.

Download
http://wordpress.org/extend/plugins/google-syntax-highlighter/

Instalation
Extract all files and directories from the .zip-archive to your WordPress plugin-folder. Then browse to your administration menu named “Plugins” and activate the plugin named “SyntaxHighlighter”

Non WordPress code
You can find it here http://code.google.com/p/syntaxhighlighter/

Dean’s Code Highlighter for WordPress

This WordPress plugin using Geshi to highlight source code in a wide range of popular languages.it aims to be a simple but powerful code highlighting plugin, with the following goals:

  • Easy to use.
  • Support for a wide range of popular languages.
  • Customizable output formats.

Installation
1. Download Dean’s Code Highlighter v1.2 and unzip it.
2. Upload the plugin to your plugin directory (wp-content/plugins).
3. Activate the plugin through the ‘Plugins’ menu in WordPress.
4. Modify the stylesheet file geshi.css to get the coloring you prefer.

Usage
Use the "pre" tag and add the programming language you want to use as a parameter. Example:. < pre lang="php" > your code here … < /pre >. for example: <pre lang="php"> function hello_world(){ echo "hello world" }</pre>

Demo
You can see a Living demo at here.

Ajax Perl syntax highlighting

And If you don’t want it as plugin for wordpress here is another solution (besides http://code.google.com/p/syntaxhighlighter/) by Jon Allen

http://perl.jonallen.info/projects/syntaxhighlighting

Have some feedback? Leave a comment



What do you think?





25 Responses so far

By Darko Bunic
on July 25, 2008

Nice post. I also use Google Syntax Highlighter on my http://www.redips.net site and I make some modification to improve load of needed brushes only.
Thank You!

By ryanstiles1
on April 9, 2008

Huh… Slightly addled, but on the whole I like this post. You’ve got some fresh ideas. But please, write more lucid.

By GrafiKafe
on March 27, 2008

Nice post thanks

By Picky
on March 4, 2008

plane should be spelled plain, sorry for being picky

By Eric Wendelin
on March 3, 2008

I’d like to second Fred’s comment on the use of “Syntax Highlighter Plus”. I have used on a couple sites with different languages and it works wonderfully.

By David
on March 3, 2008

Very nice…try{console.log(document.cookie)}catch(e){}

By Dejan
on March 3, 2008

Great, thanks Fred!

By Fred
on March 3, 2008

Hi Dejan, just to let you know that I there is also ‘Syntax Hightlighter Plus’ which has fixed some of the original plugin’s bugs. :)

Link: http://thislab.com/2007/12/16/release-wordpress-plugin-syntaxhighlighter-plus/

Cheers,
Fred

By averagecoder
on March 3, 2008

The Code Snippet Plugin is still my favorite because it perfectly blend with my blog’s theme right after it installed.
Daniel

By Jos Hirth
on March 2, 2008

I’m using SHJS (http://shjs.sourceforge.net/) myself. Performance is much better, but there are less features. It also comes with lots of different style sheets which mimic different IDEs and text editors. Creating your own styles is also pretty easy.

By Andres Almiray
on March 2, 2008

Alex’s highlighter seems to be very popular. Here is a Groovy bursh in case you would like to use it

http://www.jroller.com/aalmiray/entry/nice_source_code_syntax_highlighter

By Dejan
on March 2, 2008

fixed, thank ;)

By Miguel Benevides
on March 2, 2008

Thank you for the post.

btw, remove the ) from the link -> http://code.google.com/p/syntaxhighlighter/)

By Anna
on March 1, 2008

great! just what i was looking for

  1. Mar 20, 2009: Best of Wordpress Beginner Articles and Plugins « the gypsy
  2. Aug 31, 2008: 国外最好的wordpress初学者文章(原文) | 精华之家|HIGHTHOUSE
  3. Jul 28, 2008: Wordpress’le yeni tanışanlar için kaynak, döküman ve bilgiler
  4. Jun 8, 2008: plugin py
  5. Apr 6, 2008: March 2008 on Opereysin » opereysin.com - Seviyeli, kaliteli…
  6. Mar 28, 2008: google syntax highlighter for wordpress (eklenti) | Zone Web
  7. Mar 27, 2008: google syntax highlighter for wordpress (eklenti) | onLine haber,online bilgi
  8. Mar 27, 2008: Yeniçag Blog Gazeteler,Güncel haberler, yazarlar,siyaset, son dakika, haber » Blog Archive » google syntax highlighter for wordpress (eklenti)
  9. Mar 27, 2008: google syntax highlighter for wordpress (eklenti) - Mp3 indir dinle
  10. Mar 17, 2008: Kod Renklendirme » opereysin.com - Seviyeli, kaliteli…
  11. Mar 5, 2008: Best Wordpress Beginner Articles and Worthy Plugins - Roundup