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
</pre>

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
</pre>

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