SlidePack

A really simple slides generator & viewer

Simple

Write markdown inside a single HTML template
Open the template in your browser
Done

Creating your slides

Go to the releases page and download slide-pack.zip
Unzip it
Edit template.html (you can rename it to something more meaningful)
Open it in a browser

Recommended workflow

Install live-server or something similar
Use it to serve the slides file (template.html by default)
Open the file in a browser
Edit your slides and save your changes. Live preview FTW!

The basic template

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport"
      content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css"
      href="../dist/basic.css">
  </head>
  <body>

<textarea data-slide-pack>
# Markdown here!
&lt;/textarea>
    <script src="../dist/bundle.js"></script>
  </body>
</html>

The markdown wrapper tag

You can use any tag you like to wrap the markdown text (we used textarea in the previous example)

BUT

if you are going to put some HTML code examples in there...

you will have to choose your tag wisely to avoid problems when writing verbatim HTML (your examples) within interpreted HTML (the page you are currently viewing)

Suggested wrappers

textarea
xmp
pre

There is no silver-bullet-wrapper: if you have to include a code block containing the wrapper, you will have to use HTML entities to avoid closing the wrapper tag prematurely (see next slide).

Sorry about that :)

HTML entities (1)

When in trouble (e.g.: you need to write the SlidePack wrapper closing tag in one of your slides code examples) use HTML entities!

<textarea data-slide-pack>
--
This is some example code containing the wrapper closing tag

    <textarea>
    &amp;lt;textarea>

&lt;/textarea>

HTML entities (2)

Markdown automatically escapes HTML special characters so you can write them directly. It also lets you write HTML entities without double-escaping the &.

So, if you need to show an HTML entity verbatim in one of your slides, you will have to double-escape it yourself:

& is displayed as &
&amp;amp; is displayed as &
&amp;amp;amp; is displayed as &amp;amp;

Defining slides

Star each slide with --
Write some markdown (GFM FTW!)

Syntax highlight support

Using highlight.js with the monokai_sublime theme

/* lol */
function test() {
  console.log("LOL!");
}

Many languages, autodetected

# look ma', coffeescript!
sayHi = (name) -> alert "Hi #{name}!"

sayHi 'John'

// Some Java too
public interface Loler {
  void lol();
}

# or Ruby
class Loler < Troll
  def lol; puts "LOL"; end
end

You can be explicit, too

Use fenced code blocks to delimit your code snippets and give them a language identifier:

```javascript
function clickHandler() {
  alert("Hello, World!");
}
```

Mobile-first

Looks OK in a mobile browser
Progressive enhancement FTW

Sane font size defaults

More or less ^_^

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

-- section

SlidePack themes

A tale about defining some CSS classes

SlidePack generates a very simple HTML structure

The whole pack is an <article>
Each slide is a <section> inside the <article>

And that's it.

per-slide CSS classes

To further customize your slides, you can apply any CSS class to any slide using a special syntax in the markdown source (à la cleaver)

-- special awesome

My special, awesome slide
=========================

This slide will have *special* and *awesome* CSS classes
assigned

--

My normal, boring slide :(
==========================

Default classes

SlidePack default theme uses some CSS classes and selectors to let you tag some of your slides and display them in a specific way.

	class	selector
first slide		`section:first-child`
last slide		`section:last-child`
each section "cover"	`.section`
displays lists in two columns	`.two-columns`
removes bullets from lists	`.no-bullet`
for quoting someone	`.quote`
for a full-page image	`.full-image`

-- two-columns no-bullet

This slide is `.two-columns` and `.no-bullet`

This is item # One
This is item # Two
This is item # Three
This is item # Four
This is item # Five

quote slides need special care

If you want to add a <cite> element to your quote, you will have to use some HTML:

-- quote

> "This. Is. Blockquote!"
> <cite>Some spartan</cite>

-- quote

"This. Is. Blockquote!" Some spartan

-- full-image woods

Full image background

Nice!

This slide uses .full-image and some custom styling to increase legibility.

(Image by Todd Quackenbush)

-- full-image full-image-overlay

Image & overlay

Adding .full-image-overlay, a (not so) subtle dark overlay over the original image, combined with a subtle text shadow, make the text pop out with no need for custom styles.

(Image by Jonas Nilsson Lee)

-- section

Customization

Custom styles

SlidePack uses a default theme wich can be extended using your own stylesheet. Just add it to the HTML, like this:

<link rel="stylesheet" type="text/css" href="…">

Or write some inline styles :)

<html>
  <head>
    &hellip;

    <style>
      .my-slide p {
        background: red;
      }
      &hellip;
    </style>

    &hellip;

Specificity

If you have problems getting your styles to work, remember to check selector specificity!

HINT: to increase your custom selectors specificity, just add an id attribute to the html tag:

<html id="cool-slides">
  <head>
    &hellip;

    <style>
      #cool-slides .section {
      &hellip;
      }

      &hellip;

Remember

SlidePack is (almost) plain old HTML, so you can use inline styles, javascript,… whatever! :D

Theme override

The default SlidePack theme is constrained like this:

:not(.override) {
// theme styles here!
}

So, you can disable it like this:

<!-- add "override" as a CSS class to the html tag -->
<html class="override">
…

Total override

You can even disable the whole SlidePack styles (careful with that axe, Eugene):

<!-- remove this link to the stylesheet and you are done! :D -->
<link rel="stylesheet" type="text/css" href="slide-pack.css">

Power user

Define a hook called _slide_pack_process_slides and process the slides as you see fit. Remember to declare the hook before you insert the slide-pack Javascript file.

<script>
var _slide_pack_process_slides = function ($slides) {
  // $slides is a Zepto.js wrapper containing all the slides
  $slides.wrap('<div class="woodoo"></div>');
}
</script>
<script src="slide-pack.js"></script>

-- section

Similar projects

cleaver

cleaver is a node-powered markdown-to-html slides generator.

Pros
- Themes support
- Highly customizable
Cons
- Requires a "compilation" step

remark

remark is SlidePack on steroids. It has support for:

Templates, layouts, property expansion
Content specific classes for styling
Presenter mode (cloning + notes + upcoming slide)

Source code & issues

For source code & issues, visit https://github.com/trabe/slide-pack

That's it!

Thank you for watching ;)

Remember to grab your SlidePack from the releases page!

andion/slides.md

SlidePack

A really simple slides generator & viewer

Simple

Creating your slides

Recommended workflow

The basic template

The markdown wrapper tag

Suggested wrappers

HTML entities (1)

HTML entities (2)

Defining slides

Syntax highlight support

Many languages, autodetected

You can be explicit, too

Mobile-first

Sane font size defaults

More or less ^_^

SlidePack themes

A tale about defining some CSS classes

SlidePack generates a very simple HTML structure

per-slide CSS classes

Default classes

This slide is .two-columns and .no-bullet

quote slides need special care

Full image background

Nice!

Image & overlay

Customization

Custom styles

Specificity

Remember

Theme override

Total override

Power user

Similar projects

cleaver

remark

Source code & issues

That's it!

Thank you for watching ;)

This slide is `.two-columns` and `.no-bullet`