This repository hosts an assortment of backends (i.e., templates) for Asciidoctor, a pure Ruby port of the AsciiDoc markup language.
The deck.js backend is a collection of Haml templates which transform an AsciiDoc document to HTML5 slides animated by deck.js.
First, you should download (or git clone) the asciidoctor-backends repository to a convenient location.
git clone git://github.com/asciidoctor/asciidoctor-backends.git
Then from your working directory (that is where your AsciiDoc document resides) you must create a deck.js directory and copy there the deck.js file with its directories (extensions, themes, …). You could also just clone the [deck.js] repository.
git clone git://github.com/imakewebthings/deck.js.git
If you are planning to split your slides you also need to copy to extensions directory the deck.split.js file which can be downloaded from GitHub.
Also if you want to use the fullscreen photo feature you must create an images directory.
There are some attributes that can be set at the top of the document which they are specific of deckjs backend.
| Attribute | Description |
|---|---|
|
where you set the deck.js theme. For example: web-2.0 |
|
where you set the kind of transition. For example: horizontal-slide |
|
where you set a custom javascript file. It can be used as a deck.js custom configuration. |
|
where you set a custom css file. |
|
the presence of this attribute makes deck.js to render a back/next icons. |
|
the presence of this attribute makes deck.js to render current slide and total number of slides. |
|
with this attribute we are registering the deck.split.js file. |
|
Note
|
You can also specify a custom stylesheet using the stylesheet attribute, which can be used to customize AsciiDoc elements like section, paragraph, images, etc… |
Let’s see some examples of deckjs backend features:
= Title Slide Presenter Name == Slide One Foo Bar World [canvas-image="./images/cosplay.jpg"] == Slide Two [role="canvas-caption", position="center-up"] Hello World - Good Bye Cruel World
In previous snippet we are creating a slide without a title (Slide One will not be shown), but a fullscreen image as background will be embedded, and centered at top of the slide and over the image the message ``Hello World - Good Bye Cruel World''.
Some things to consider:
-
canvas-image attribute receives as parameter the location of image we want to use and always must go before section.
-
if you are planning to add a message over the image, you can do it as usually, but probably won’t be read good, using position attribute which positions text into the slide (bottom-left, top-left, bottom-right, top-right, center-up, center-down) and canvas-caption role will improve so much how text is rendered.
== Another Slide [options="step"] That's all. [options="step"] My Folks
In previous example we are creating one slide which instead of showing both paragraphs at the same time, will be presented each time you try to go to next slide.
And the same can be applied to lists, images, quotes, code:
== Yet Another Slide [options="step"] * A * B * C
In this case each bullet will appear to screen each time you try to go to next slide.
|
Warning
|
The original deckjs backend for AsciiDoc used the option name 'incremental' instead of 'step'. We’ve changed it here to save you some typing :) |
First, make sure Asciidoctor is installed:
gem install asciidoctor
Then, to render your presentation as HTML5, simply execute the command:
asciidoctor -T <backend directory> <asciidoc file>
So for the above deckjs backend you’d use
asciidoctor -T <base>/asciidoctor-backends/haml/deckjs <asciidoc file>
The reveal.js backend is a collection of slim templates which transform an AsciiDoc document to HTML5 slides animated by reveal.js.
First, you should download (or git clone) the asciidoctor-backends repository to a convenient location.
git clone git://github.com/asciidoctor/asciidoctor-backends.git
Then from your working directory (that is where your AsciiDoc document resides) you must create a reveal.js directory and copy there the reveal.js file with its directories (plugin, css, …). You could also just clone the reveal.js repository.
git clone git://github.com/hakimel/reveal.js.git
There are some attributes that can be set at the top of the document which they are specific of revealjs backend.
|
Note
|
Default settings are based on |
| Attribute | Description |
|---|---|
|
Chooses one of reveal.js' built-in themes. Default: default |
|
Overrides CSS with given file or URL. Default is disabled. |
|
Display controls in the bottom right corner. Default: true |
|
Display a presentation progress bar. Default: true |
|
Display the page number of the current slide. Default: false |
|
Push each slide change to the browser history. Default: false |
|
Enable keyboard shortcuts for navigation. Default: true |
|
Enable the slide overview mode. Default: true |
|
Enables touch navigation on devices with touch input. Default: true |
|
Vertical centering of slides. Default: true |
|
Loop the presentation. Default: false |
|
Change the presentation direction to be RTL. Default: false |
|
Turns fragments on and off globally. Default: true |
|
Flags if the presentation is running in an embedded mode, i.e. contained within a limited portion of the screen. Default: false |
|
Number of milliseconds between automatically proceeding to the next slide, disabled when set to 0, this value can be overwritten by using a data-autoslide attribute on your slides. Default 0 |
|
Stop auto-sliding after user input. Default: true |
|
Enable slide navigation via mouse wheel. Default: false |
|
Hides the address bar on mobile devices. Default: true |
|
Opens links in an iframe preview overlay. Default: false |
|
Transition style. Valid values: default/cube/page/concave/zoom/linear/fade/none |
|
Transition speed. Valid values: default/fast/slow |
|
Transition style for full page slide backgrounds. Valid values: default/none/slide/concave/convex/zoom |
|
Number of slides away from the current that are visible. Default: 3 |
|
Parallax background image. Defaults to none |
|
Parallax background size (accepts any CSS syntax). Defaults to none |
If you want to build a custom theme or customize an existing one you should look at reveal.js’s documentation and use revealjs_theme attribute: https://github.com/hakimel/reveal.js/blob/master/css/theme/README.md
Let’s see some examples of revealjs backend features:
= Title Slide == Slide One * Foo * Bar * World == Slide Two Hello World - Good Bye Cruel World [NOTE.speaker] -- Actually things aren't that bad --
In previous snippet we are creating a slide titled Slide One with bullets and another one titled Slide Two with centered text (reveal.js' default behavior) with speaker notes.
[data-background="yellow"] == Slide Three Is very yellow
Slide Three applies the attribute data-background to the reveal.js <section> tag.
Anything accepted by CSS color formats works.
Here is the upstream documentation.
== Slide Four [%step] * this * is * revealed * gradually
Slide Four has bullets that are revealed one after the other.
This is what reveal.js calls fragments.
Applying the step option or role on a list ([%step] or [.step]) will do the trick.
Here is upstream documentation on the topic.
Note that only fade-in is supported for lists at the moment.
First, make sure Asciidoctor is installed:
gem install asciidoctor
Then, to render your presentation as HTML5, simply execute the command:
asciidoctor -T <backend directory> <asciidoc file>
So for the above revealjs backend you’d use
asciidoctor -T <base>/asciidoctor-backends/slim/revealjs <asciidoc file>