-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0|420|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
SoCoder -> Showcase Home -> Apps and Utilities

Created : 01 November 2007
Edited : 01 November 2007
Language : FastBasic

Syntax highlighting box

Easy way to get some fancy code boxes

I was originally going to write an article, but I just couldn't be arsed to do it So I'll give you the code I wrote instead and give some pointers on how to use it.

This is what the end result looks like.

To use the script, you need a host/local server that supports PHP. Then, you extract SyntaxBox_Style.css and SyntaxBox.php to the directory of your choice. In the XHTML/HTML file where you want the box to show up, you shove in some simple PHP code:

Change "source.txt" to point to the file you want colored. The script can be modified to load from for example a database, but I'll leave that to you. $box->Draw() adds the box into the HTML page.

Simply change the .css file to get another style, and have a look at SyntaxBox.php if you need to add new keywords/etc.

Latest Update

1.1 Fixed a bug that occurred when copying/pasting from the box.
1.0 Initial release



Thursday, 01 November 2007, 09:54
I've wanted to add something like that to the site for a while, now. Unfortunately most of them mess up when it comes to the copy+pasting the code.

Maybe something to add once I've finally done that upload script, eh
Thursday, 01 November 2007, 10:08
Damn, mine also messes up :/ Give me a few minutes (or hours ) and I'll fix it...
Thursday, 01 November 2007, 10:36
Seems like this is a Firefox bug, however it can be fixed by adding a small button which automatically copies the source to the clipboard when clicked. Is it worth a try?
Thursday, 01 November 2007, 10:50
The Copy to Clipboard won't work with all browsers, so it's not really something I'd bother trying to implement. But of course, this is your own project, and it might be worth a try.
Thursday, 01 November 2007, 11:12
I solved it! Just a simple workaround removed the need of a copy button I'll update the new code, as soon as I've cleaned it up a bit.

|edit| The new version is now available |edit|
Thursday, 01 November 2007, 14:22
Oooo very cool.

Any plans for a Cobra version?
Thursday, 01 November 2007, 15:55
You mean Cobra highlighting? I could do that
Friday, 02 November 2007, 04:15
Again, a really nice idea, but there are still 2 minor issues.
Friday, 02 November 2007, 09:18
I've solved the selection problem, but I'm not sure that I can make the regex searching from JavaScript. It's a bit more limited than PHP's implementation (it has neither lookbehinds nor conditionals, which are quite handy). I can clean up the HTML output a little though.
Friday, 02 November 2007, 09:27
If you could, could you describe the selection problem? (On account of I found another syntax highlighter that does work in Javascript) (sorry!!)
Friday, 02 November 2007, 09:51
Well if there is one in JavaScript that works then it's just my regex being rusty.

What syntax highlighter did you find?
Friday, 02 November 2007, 10:00
Seems to work well enough once you've spent 20 minutes trying to find a great big Blitz Keyword list, and desperately tried to figure out how to hack it into the javascript!

Still getting that Select+Copy issue.
Friday, 02 November 2007, 10:10
Aww, ffs..
You know what... forget it!!
I'm sticking with the textboxes.

IE, for some reason, completely kills the formatting of the code between copying and pasting it. That is, it turns the example above from


when you paste it into Blitz.

Same for your highlighter.

Stupid damn IE!


Syntax Highlighting is officially cancelled until the W3C decide to make a nice colorful new text area thing, and then MS bother to put it into their browser!

Still, we got the Uploads working, so that's something.
Friday, 02 November 2007, 12:14
I think I've fixed it. Jay, can I have your Blitz language file for highlight.js?
Friday, 02 November 2007, 15:59
Blitz Highlight file
Saturday, 03 November 2007, 08:16
Does it really need to be fixed for IE?
Saturday, 03 November 2007, 08:49
The dream of every web developer Yes, it has to be fixed for IE. There are still lots of people who use that.
Monday, 05 November 2007, 04:36
I'm just making some changes so it so that it can more easily support multiple languages and colour schemes

I'll post a link here when it's done
Monday, 05 November 2007, 06:52
Ok, but does it use JavaScript? I have a version where you can copy and paste but I haven't bothered uploading it. Perhaps we should merge them together?
Monday, 05 November 2007, 17:19
Mine is basically just a modified version of yours

Nothing spectacular unfortunately

I'll upload it when I get home though