In my last post I demonstrated how to create HTML presentations with deck.js and hosting them inside your Octopress blog. While the ‘client-side’ is basically finished, the ‘backend’ still needs some work because
- we can’t use markdown to write the slides
- we must create a new slidedeck by hand
The first problem can be solved by creating a custom
Liquid::Block for slides and the second
problem can be solved by creating a small rake task that basically works the same as the
A Liquid::Block for Slides
Currently, when writing slides, we have to use HTML because Markdown inside HTML block tags like
<div></div> will be ignored by the Markdown processor. To fix this problem we will create a custom
Liquid::Block that wraps its content inside a slide div. With the help of the
can write a slide like this:
1 2 3 4
This will then compile to the following HTML:
1 2 3 4
Liquid::Block is actually quite easy. First, we create a file
with the following content:
1 2 3 4 5 6
This creates a class for our custom
Liquid::Block and registers it as a tag in the Liquid engine. This is enough to use
the tag but nothing will be generated yet. Next we will override the
initialize method and parse the id of the slide.
1 2 3 4 5 6 7 8 9 10 11
Since we only have to parse one argument, the id, this is fairly simple. The
markup variable contains everything that comes
slide in the opening brackets, i.e.
<div class='slide' id='markup'></div>. The regex we use to parse the id matches the
first word and ignores everything thereafter.
The next step is to override the
render method that converts everything inside our slide block
from Markdown to HTML and wraps it with a slide div.
1 2 3 4 5 6 7 8 9 10 11 12
The only interesting part here is the usage of
super. We call
super here to get the content of
our block tag and run it through RDiscount to convert it to HTML.
And that is all we need for our custom slide block !
A Rake task for Slides
The will be even easier than creating the
Liquid::Block. First we define two new variables in the
Rakefile which are pretty self-explanatory
For the task itself we copy the existing
:new_post task and replace the
new_slides_ext and adjust all the messages. We will also add all
the deck.js options to the YAML Front Matter and change the layout from
complete slides task looks like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34