top
01
03
2008
21:19 pm

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

Subscribe full RSS RSS
  • del.icio.us del.icio.us (0)
  • StumbleUpon StumbleUpon
  • Digg Digg
  • Mister Wong Wong it
20 Responses, Leave a Reply
20
ryanstiles1
April 9th
2008
11:14 am

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

19
GrafiKafe
March 27th
2008
17:14 pm

Nice post thanks

18
Picky
March 4th
2008
20:43 pm

plane should be spelled plain, sorry for being picky

17
Eric Wendelin
March 3rd
2008
18:56 pm

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.

16
David
March 3rd
2008
13:47 pm

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

15
Dejan
March 3rd
2008
13:27 pm

Great, thanks Fred!

14
Fred
March 3rd
2008
10:28 am

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

13
averagecoder
March 3rd
2008
9:31 am

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

12
Jos Hirth
March 2nd
2008
20:07 pm

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.

11
Andres Almiray
March 2nd
2008
7:32 am

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

10
Dejan
March 2nd
2008
0:39 am

fixed, thank ;)

9
Miguel Benevides
March 2nd
2008
0:32 am

Thank you for the post.

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

8
Anna
March 1st
2008
21:25 pm

great! just what i was looking for

7 Trackback(s)
  1. Apr 6, 2008: March 2008 on Opereysin » opereysin.com - Seviyeli, kaliteli…
  2. Mar 28, 2008: google syntax highlighter for wordpress (eklenti) | Zone Web
  3. Mar 27, 2008: google syntax highlighter for wordpress (eklenti) | onLine haber,online bilgi
  4. Mar 27, 2008: Yeniçag Blog Gazeteler,Güncel haberler, yazarlar,siyaset, son dakika, haber » Blog Archive » google syntax highlighter for wordpress (eklenti)
  5. Mar 27, 2008: google syntax highlighter for wordpress (eklenti) - Mp3 indir dinle
  6. Mar 17, 2008: Kod Renklendirme » opereysin.com - Seviyeli, kaliteli…
  7. Mar 5, 2008: Best Wordpress Beginner Articles and Worthy Plugins - Roundup
What do you think?

Name (required)

Email (will not be published) (required)

Website

About

StylizedWeb is blog about web trends and tutorials and KnowHow community forum designed and maintained by Dejan Cancarevic.

Six Shooter Media
logo and web site design

Search