Features

  • Based on Google I/O 2012 slides
  • But "Panda-fied" using Harp and Jade (⇒ built-in Markdown support!)
  • Write slides in your $EDITOR, not PowerPoint
  • Built-in support for code snippets with pretty syntax highlighting
  • Support for speaker notes and presentation mode
  • Works in any modern browser
  • Read on to see a demo of features, or learn how to get started

Slide with Bullets

  • Titles are formatted as Open Sans with bold applied and font size is set at 45
  • Title capitalization is title case
    • Subtitle capitalization is title case
  • Subtitle capitalization is title case
  • Titles and subtitles should never have a period at the end

Slide with Bullets that Build

Subtitle Placeholder

A list where items build:

  • Pressing 'h' highlights code snippets
  • Pressing 'p' toggles speaker notes (if they're on the current slide)
  • Pressing 'f' toggles fullscreen viewing
  • Pressing 'w' toggles widescreen
  • Pressing 'o' toggles overview mode
  • Pressing 'ESC' toggles off these goodies

Another list, but items fade as they build:

  • Hover over me!
  • Hover over me!
  • Hover over me!

Slide with (Smaller Font)

  • All links open in new tabs.
  • To change that this, add target="_self" to the link.

Code Slide (with Subtitle Placeholder)

Subtitle Placeholder

Press 'h' to highlight important sections of code (wrapped in <b>).

// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
  for (var i = 42; --i >= 0;) {
    alert('Hello ' + String(world));
  }
}

Code Slide (Smaller Font)

// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
  for (var i = 42; --i >= 0;) {
    alert('Hello ' + String(world));
  }
}

<style>
  p { color: pink }
  b { color: blue }
</style>

<!DOCTYPE html>
<html>
<head>
  <title>My Awesome Page</title>
</head>
<body>
  <p>Hello world</p>
<body>
</html>

Slide with Speaker Notes

Press 'p' to toggle speaker notes.

Presenter Mode

Add ?presentme=true to the URL to enabled presenter mode. This setting is sticky, meaning refreshing the page will persist presenter mode.

Hit ?presentme=false to disable presenter mode.

Slide with Image

Description
source: place source info here

Slide with Image (Centered horz/vert)

Description
source: place source info here

Table Option A

Subtitle Placeholder

Column 1Column 2Column 3Column 4
Row 1placeholderplaceholderplaceholderplaceholder
Row 2placeholderplaceholderplaceholderplaceholder
Row 3placeholderplaceholderplaceholderplaceholder
Row 4placeholderplaceholderplaceholderplaceholder
Row 5placeholderplaceholderplaceholderplaceholder

Table Option A (Smaller Text)

Subtitle Placeholder

Column 1Column 2Column 3Column 4
Row 1placeholderplaceholderplaceholderplaceholder
Row 2placeholderplaceholderplaceholderplaceholder
Row 3placeholderplaceholderplaceholderplaceholder
Row 4placeholderplaceholderplaceholderplaceholder
Row 5placeholderplaceholderplaceholderplaceholder

Table Option B

Subtitle Placeholder

Header 1placeholderplaceholderplaceholder
Header 2placeholderplaceholderplaceholder
Header 3placeholderplaceholderplaceholder
Header 4placeholderplaceholderplaceholder
Header 5placeholderplaceholderplaceholder

Slide Styles

  • class="red"
  • class="red2"
  • class="red3"
  • class="blue"
  • class="blue2"
  • class="blue3"
  • class="green"
  • class="green2"
  • class="green3"
  • class="yellow"
  • class="yellow2"
  • class="yellow3"
  • class="gray"
  • class="gray2"
  • class="gray3"
  • class="gray4"
I am centered text with a and button.

Segue Slide

Subtitle Placeholder

Full Image (with Optional Header)

www.flickr.com/photos/25797459@N06/5438799763/
This is an example of quote text.
Name
Company

Slide with Iframe

Font Awesome included!

  • Panda Slides includes Font Awesome
  • Quickly add a large variety of scalable vector symbols to your presentation
.small.medium.large.huge.ginormous

Getting Started

Getting Started with Panda Slides

Install Harp, if you don't already have it:

 npm install -g harp

Create a new slide deck:

 harp init [name] -b pandastrike/panda-slides

NOTE: If name is omitted, slides will be created in the current directory.

Start a server for live preview:

 harp server -p 1337

Open your browser and go to http://localhost:1337/

Editing Slides

  • Slides are written in Jade and can be edited in any text editor
  • Simply open index.jade after creating a new slide set and customize away
  • Save and reload your browser preview to see changes
  • Add your own images under images/
  • Customize the stylesheet in styles/

When you're ready to upload your slides to a web server, simply run

harp compile -o slides

From the your slide directory.

Your static HTML slides can then be found in a subdirectory called slides/

<Thank You!>

Important contact information goes here.