andion/slides.md

## slides.md

      
    Raw
  

              slides.md
            
          
    --
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!
	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`