Highlighting Code

[PBertie]

I've been looking at ways to highlight code on my website. I've sorted the php using the built in highlight_string() function.
Now I'm looking to do HTML, CSS & JavaScript. I looked at the PEAR stuff for this and the XML highlighting looks good on HTML but the CSS & JavaScript is pretty bad, doesn't pick up /* */ comments in CSS and the JavaScript was only two colours.

So now I'm just going to write some functions myself, does anyone have any ideas on a starting point? I'm thinking some sort of recursive parser but I'm holding out for a better idea.

[Justa Lol]

this one seems to highlight javascript with more then 2 colors, you could do some research on how its done, by viewing the code, and then modify as you see fit.

http://css-tricks.com/5147-highlight-code-with-php/

[kows]

I use GeSHi. Its usage is pretty simple -- instantiate an instance of the GeSHi class passing in the source file and the language to use, and you're good to go. The GeSHi documentation goes over customizing colors, line numbers, and other features.

For example, this page has some Objective-C source files embedded in it. I created an array of examples, each example being an instance of GeSHi, and then parsed it later when I needed to:

<?php
  require("../geshi/geshi.php");

  $path = "./src/rootcontroller/";

  $examples = array();
  $examples[] = new GeSHi(file_get_contents($path . "notifications.m"), "objc");
  $examples[] = new GeSHi(file_get_contents($path . "delegate.m"), "objc");
  $examples[] = new GeSHi(file_get_contents($path . "property.m"), "objc");
?>
<!-- HTML, later on: -->
<?php echo $examples[0]->parse_code(); ?>

<?php echo $examples[1]->parse_code(); ?>

<?php echo $examples[2]->parse_code(); ?>

It's easy and has a pretty large list of supported languages.

Edit: Forgot to mention, GeSHi also links to the developer documentation for a lot of internal functions that it knows of. You can see it in the page I linked -- NSNotificationCenter and NSNotification both link to the Apple Developer website. I'm sure that option could be turned off, as well, if it wasn't desired. Not sure.

[PBertie]

Thanks,
I had found an example that was pretty buggy and was working through it to do something similar. The idea was pretty simple behind it, parsed the code in blocks. So for html you would treat text inside <> as a tag block and the rest as plain text. You then format the tag block further, the code they gave just hightlights the first word and doesn't process the attributes and values which i was going to add.
The CSS code used {} instead of <> to seperate it but was very buggy caused by a regular expression checking for whitespace. If you indented your CSS it removed those line lol.

An advantage of this code though was it would be easy to modify to allow multiple code styles in one example.
E.g. PHP file that would have PHP highlighting but also HTML for the HTML sections and even CSS and JavaScript inside that.
That GeSHi looks really good I'm gonna have a play with it now...

The exmaples I found by the way are:
HTML Hightlight
CSS Hightlight

[PBertie]

Yea that GeSHi is really good, had to change the PHP syntax file a bit but not much. They had the <?php tag grouped with Function & Global, but ?> was in with symbols So I put the <?php in with ?>
Also its based on using the style attribute not classes so had to do a few replaces to use my classes.
Results for PHP at: Test Page
Shows the highlight_string() output too.

BTW you can turn the function links off from the syntax file, I did it for the HTML because it was a bit excessive. Pretty handy for PHP so left it on .

I'm going to do a pre parser to split out the php/html/css/javascript when its mixed cotent but looks like that'll be pretty simple.