Adding syntax highlighting to Ghost

I wanted to enhance the syntax highlighting in the default Ghost theme (Casper). I dug around and while there are a ton of solutions out there, I settled on Prism because it's simple and lightweight. Notice the colorful goodness:

// here is some JavaScript
var x = new joButton("Hello World!");  

Prism is easy to install in your default ghost theme (I'm using Casper). Don't let the length of this tutorial fool you; it took me about five minutes total to get up and running.

Installing Prism

  1. Go to http://prismjs.com/download.html

  2. Select a few options; basically, which theme you want and what languages you want to support

  3. Scroll down to the bottom and download your custom-made prism.js and prism.css files; put them someplace you can find

  4. Copy these files to your server, and login there

  5. Copy prism.js into your ghost/content/themes/casper/assets/js folder

Continue...

Jo cross-platform demo screencast up on YouTube

Twelve minutes of Jo, showing the same JavaScript web app code running on webOS, iPhone, iPad, Android, Symbian and... Dashboard widgets? Yup.

First in a series of videos, this screencast is a quick intro to the cross-platform capabilities of this JavaScript framework (both for mobile apps with PhoneGap and mobile web apps). Followup videos will cover making your first Jo app, getting it running with PhoneGap, theming it with CSS and other goodies. Enjoy!

You can also read more about this open source project at http://joapp.com.

Continue...

Jo and webOS part 2: window orientation and full screen

The last post revealed how a simple call to PalmSystem from your JavaScript code opens the door for you to take a stock web app with your favorite framework and turn it into a simple webOS app without having the overhead (or the wealth of cool features, in the interest of fairness) of Mojo.

Continuing with my explorations in the webOS 1.4.5 SDK, I’ve picked out a couple of other useful calls to the PalmSystem object. Both can be added to the “hello world” example I started in part one, and they’re really quick.

Free-wheeling orientation

A common requirement for mobile apps is the ability to respond to device orientation. I’m still digging around to see where you can hook into these events, but in the meantime here’s a simple call which is quite useful:

window.PalmSystem.setWindowOrientation('free');  

This tells webOS to let

Continue...

Jo and webOS: bypassing Mojo

One neat discovery I found in the webOS 1.4.5 SDK is that it is possible to have a simple app which doesn’t use Mojo. Why would you want to? Load time! Mojo brings a lot to the table, but if you want to use your own favorite JavaScript framework, much of that ends up being overhead and increases your app’s load time.

Step one: Make a web app and test it in Chrome or Safari.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"  
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">  
<head>  
    <title>Hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>  
<body>  
    <h1>Hello World!</h1>
</body>  
</html>  

Save this into a new folder

Continue...