deck.js is a JavaScript library for building modern HTML presentations. deck.js is flexible enough to let advanced CSS and JavaScript authors craft highly customized decks, but also provides templates and themes for the HTML novice to build a standard slideshow.
For more information, please check out its project page.
AsciiDoc-Deck.js makes it possible to write deck.js slides in my favorite markup language AsciiDoc. To make life easier, I also bundled this backend with some thirdparty deck.js extensions:
First, make sure you have at least asciidoc-8.6.6 installed and download this backend from the project page.
Then install the backend:
asciidoc --backend install deckjs-X.Y.Z.zip
After the installation, it’s just as simple as issuing following command:
asciidoc -b deckjs file.asciidoc
You can also use this backend without installation, please refer to README for details.
Following are built-in shortcuts in deck.js:
-
jump to any slide by given number,
g. -
preview all slides,
m.
Shortcuts from deck.js’s thirdparty extensions:
-
toggle table of content,
t -
toggle page blank/unblank,
b
This part assumes that you are already familiar with some basic concepts in AsciiDoc.
-
slides are divided by level 1 sections.
== Slide1 title say whatever you want here.
-
lists
* entry1 * entry2 * entry3
-
ordered list
1. entry1 1. entry2 1. entry3
A complete guide for lists can be found at this page
You can choose theme and transition effect by specifying the deckjs-theme and deckjs-transition attributes:
:deckjs_theme: neon :deckjs_transition: vertical-slide
Refer to boilerplate for all the supported themes.
Nested slide (or subslide) give you the ability to create substeps in slides. In this backend, elements that given incremental attribute will be paused before show up.
syntax:
[incremental="true"] * this entry should show up first * this entry should show up following the first one * this entry should be the last one
effect:
-
this entry should show up first
-
this entry should show up following the first one
-
this entry should be the last one
syntax:
........................................... <html> <head> </head> <body> <p>Hello World.</p> </body> </html> ...........................................
effect:
<html> <head> </head> <body> <p>Hello World.</p> </body> </html>
syntax:
[source,c,numbered]
-------------------------------------------
int swallow_redpill () {
unsigned char m[2+4], rpill[] = "\x0f\x01\x0d\x00\x00\x00\x00\xc3";
*((unsigned*)&rpill[3]) = (unsigned)m;
((void(*)())&rpill)();
return (m[5]>0xd0) ? 1 : 0;
}
-------------------------------------------
effect:
int swallow_redpill () {
unsigned char m[2+4], rpill[] = "\x0f\x01\x0d\x00\x00\x00\x00\xc3";
*((unsigned*)&rpill[3]) = (unsigned)m;
((void(*)())&rpill)();
return (m[5]>0xd0) ? 1 : 0;
}By default, AsciiDoc use source-highlight to highlight your code. If you want to use Pygments, you have to set pygments attribute (refer to example template).
QuoteBlocks syntax from Asciidoc is fully supported, you can find complete guide on this page.
syntax:
[quote, L. Kronecker] ___________________________________________ God made the natural number and all the rest is the work of man ___________________________________________
effect:
God made the natural number and all the rest is the work of man
If your slide is too long, you can manually split it into multiple slides.
syntax:
This line will be shown in current slide. ifdef::backend-deckjs[<<<] This line will be shown in next slide with the same title.
effect:
This line will be shown in current slide.
This line will be shown in next slide with the same title.
syntax:
image::http://www.gnu.org/graphics/gnu-head-sm.jpg[title="Texinfo"]
effect:
syntax:
video::http://www.youtube.com/embed/GP3zvc2dG5Y[width="420", height="315"]
effect:
The source code for this slide can be found here:
You can get start with following template:
That’s all. Hope you enjoy this backend. :-)