Bear Den Designs

Syntax Highlighting for Everyone!

I recently integrated a javascript based syntax highlighter into this blog. Its very easy to do and quiet useful. Here is a quick rundown. I also go over some alternative methods afterwards.

The software I ended up using was SyntaxHighlighter

Instructions can be found here just include some files, run the javascript and your gold.

Once thats in place all you have todo is invoke:

<pre name="code" class="yourlanguage">
   awesome code snippit here

Where ‘yourlanguage’ is one of ruby,perl,etc

There is a very useful option which allows you to match line numbers to the file you may be refering to (for example your code may begin on line 10).

<pre name="code" class="yourlanguage:firstline[10]">
   awesome code snippit here

Here is an example from line 35 from a rails controller (Note the line numbers on the left)

def show
  @owner = User.find(params[:user]) || User.find(1)
  @blogs = Blog.paginate :conditions => ["(user_id = ?) AND NOT disabled", @owner.id], 
    :order => 'updated_at DESC', :per_page => 5, :page => params[:page]
end

SyntaxHighlighter supports out of the box:

• Csharp
• C++
• CSS
• Delphi
• JavaScript
• Java
• Php
• Python
• Ruby
• SQL
• VisualBasic
• XML (Which works well for xhtml files)

In addition you can grab shBrushPerl.js which adds perl support.

And thats all there is to it! Syntax Highlighting with Client Side Javascript.

I would also like to point out some other ways to convert code into markup.

• Coderay integrates well with ruby on rails.
• GeSHi is a PHP based generator.
• Highlight is a command line (and gtk gui) based app.

At the very least Highlight’s console output can be grabbed and fed into your web application no matter what language. It also has a cool 256 Color Xterm output which is great for piping code into from grep or less.

Highlight also comes with a slew of existing color schemes in CSS which is nice.

There are many more highlighters out there, google is your friend.

Enjoy the shiny colors!

Solution to: Permission denied to get property XULElement.popupOpen

What’s that firefox? A cryptic error message? Timmy’s drowning at the old mill?!

I came across this rather strange bug while switching from a file input to a combination of SWFUploader and a text field.

Permission denied to get property XULElement.popupOpen

The problem seems to occur when focusing on the input via javascript.

Solution? Easy, Just add this to your text input:

autocomplete=“off”

And then give firefox a nice pop on the head for being a bad fox! Bad Fox! …No!

I hope that saves you some headache and confusion =)

- Your Friendly Neighborhood Hacker

Flexible date input and manipulation in javascript with date.js

date.js is a great little JavaScript library that can make your life a lot easier.

If your used to ruby’s date functions then date.js will make you feel right at home.

date.js can:

• Parse strings into dates.
• Add and Subtract time in days,hours,months or years.
• Easily return “x” “day of week” of “month”
• Boolean assertions for day, week, month, year.
• Turn you into a JavaScript ninja.

Note: Some of the syntactic goodies require ‘sugar.js’

Going into the future is no problem for date.js

Date.today().add(5).days(); Date.today().next().friday();

Interested in this Friday? April of this year?

Date.friday(); Date.april();

What about the first friday of april? No Sweat!

Date.april().first().friday();

Assert any date properties you want.

Date.today().is().friday(); // returns true orfalse

It can parse just about anything you throw at it.

Date.parse(‘today’); Date.parse(‘tomorrow’); Date.parse(‘July 8’); Date.parse(‘July 8th, 2007’); Date.parse(‘July 8th, 2007, 10:30 PM’); // Even crazy! things like Date.parse(‘last april’); Date.parse(‘+2days’);

There are also some fun number functions.

(8).days().fromNow(); (2).months().ago();

For more reading, checkout: date.js examples