Asciidoctor reveal.js is a converter for Asciidoctor and Asciidoctor.js that transforms an AsciiDoc document into an HTML5 presentation designed to be executed by the reveal.js presentation framework.
There are two main technology stacks that can transform AsciiDoc into HTML5 / reveal.js:
-
Asciidoctor / Ruby / Bundler (See Ruby Setup)
-
Asciidoctor.js / JavaScript (Node.js) / NPM (See Node / JavaScript Setup)
Right now the Asciidoctor / Ruby stack is the better tested one but with the changes in v1.1.0 they have feature parity.
📎
|
You’re viewing the documentation for the upcoming release.
If you’re looking for the documentation for an older release, please refer to one of the following branches: 1.0.x ⁃ Unversioned pre-release (compatible with RevealJS 2.x) |
- Ruby Setup
- Node / JavaScript Setup
- Syntax Examples
- Basic presentation with speaker notes
- Slides without titles
- Background colors
- Background images
- Background videos
- Background iframes
- Slide Transitions
- Fragments
- Stretch class attribute
- Videos
- Syntax highlighting
- Vertical slides
- Title slide customization
- Content meant for multiple converters
- CSS override
- Slide state
- Admonitions
- Reveal.js Options
- Minimum Requirements
- Copyright and Licensing
📎
|
asciidoctor-reveal.js is now a Ruby Gem. To ensure repeatability, we recommend that you manage your presentation projects using bundler. |
For a quick start clone our starter repository and follow instructions there.
For more complete instructions, read on.
-
Install bundler (if not already installed) using your system’s package manager or with:
$ gem install bundler
-
If you’re using RVM, make sure you switch away from any gemset:
$ rvm use default
or
$ rvm use system
📎
|
These instructions should be repeated for every presentation project. |
-
Create project directory
$ mkdir my-awesome-presentation $ cd my-awesome-presentation
-
Create a file named
Gemfile
with the following content:source 'https://rubygems.org' gem 'asciidoctor-revealjs' # latest released version
📎For some reason, when you use the system Ruby on Fedora, you also have to add the json gem to the Gemfile. -
Install the gems into the project
$ bundle config --local github.https true $ bundle --path=.bundle/gems --binstubs=.bundle/.bin
-
Optional: Copy or clone reveal.js presentation framework. Allows you to modify themes or view slides offline.
$ git clone -b 3.6.0 --depth 1 https://github.com/hakimel/reveal.js.git
-
Create content in a file (*.adoc, *.ad, etc.). See examples in Syntax Examples section to get started.
-
Generate HTML presentation from the AsciiDoc source
$ bundle exec asciidoctor-revealjs \ -a revealjsdir=https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0 CONTENT_FILE.adoc
-
If you did the optional step of having a local reveal.js clone you can convert AsciiDoc source with
$ bundle exec asciidoctor-revealjs CONTENT_FILE.adoc
💡
|
If you are using GitHub Pages, plan ahead by keeping your source files on master branch and all output files on the gh-pages branch.
|
First you must install and configure Node.js on your machine.
Once the package is installed, you can convert AsciiDoc files using reveal.js converter.
Here we are converting a file named presentation.adoc
into a reveal.js presentation using Node.js:
// Load asciidoctor.js and asciidoctor-reveal.js
var asciidoctor = require('asciidoctor.js')();
require('asciidoctor-reveal.js');
// Convert the document 'presentation.adoc' using the reveal.js converter
var attributes = {'revealjsdir': 'node_modules/reveal.js@'};
var options = {safe: 'safe', backend: 'revealjs', attributes: attributes};
asciidoctor.convertFile('presentation.adoc', options); // (1)
-
Creates a file named
presentation.html
(in the directory where command is run)
= Title Slide
// depending on your npm version, you might need to override the default
// 'revealjsdir' value by removing the comments from the line below:
//:revealjsdir: node_modules/asciidoctor-reveal.js/node_modules/reveal.js
== Slide One
* Foo
* Bar
* World
To render the slides, run:
node asciidoctor-revealjs.js
You can open the presentation.html
file in your browser and enjoy!
Let’s see some examples of revealjs
backend features.
Additional examples can be found in the AsciiDoc files (.adoc) in examples/
.
= 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.
Speaker notes are opened by pressing s
.
With Reveal.js 3.5 they require a webserver to work.
This limitation is not present in 3.6.
You can get a Web server running quickly with:
ruby -run -e httpd . -p 5000 -b 127.0.0.1
Then use your browser to navigate to the URL http://localhost:5000.
There are a few ways to have no titles on slides.
-
Setting your title to
!
-
Adding the
notitle
option to your slide -
Adding the
conceal
option to your slide
📎
|
conceal and notitle have the advantage that the slide still has an id so it can be linked to.
|
❗
|
Like the first page of an AsciiDoc document, the first slide is handled differently.
To hide the whole slide use the :notitle: document attribute.
To achieve the effect of hiding only the first slide’s title, combine the :notitle: attribute on the first slide and use [%notitle] on the second slide which will, in effect, be your first slide now.
|
[background-color="yellow"]
== Slide Three
Is very yellow
Slide Three applies the attribute data-background-color to the reveal.js
<section> tag.
Anything accepted by CSS color formats works.
[%notitle]
== Grand Announcement
image::cover.jpg[background, size=cover]
This will put cover.jpg
as the slide’s background image.
It sets reveal.js’ data-background-image
attribute.
The size
attribute is also supported.
See the relevant reveal.js documentation for details.
📎
|
Background images file names are now relative to the :imagedir: attribute if set.
|
📎
|
The canvas keyword can be used instead of background for the same effect.
|
[%notitle]
== The Great Goat
image::https://upload.wikimedia.org/wikipedia/commons/b/b2/Hausziege_04.jpg[canvas,size=contain]
As you can see, you can use a URL to specify your image resource too.
A background video for a slide can be specified using the background-video
element attribute.
[background-video="https://my.video/file.mp4",background-video-loop=true,background-video-muted=true]
== Nice background!
For convenience background-video-loop
and background-video-muted
attributes are mapped to loop
and muted
options which can be specified with options="loop,muted"
.
For example:
[background-video="https://my.video/file.mp4",options="loop,muted"]
== Nice background!
See the relevant reveal.js documentation for details.
Note that the data-
prefix is not required in asciidoc files.
The background can be replaced with anything a browser can render in an iframe using the background-iframe
reveal.js feature.
[%notitle,background-iframe="https://www.youtube.com/embed/LaApqL4QjH8?rel=0&start=3&enablejsapi=1&autoplay=1&loop=1&controls=0&modestbranding=1"]
== a youtube video
See the relevant reveal.js documentation for details.
[transition=zoom, %notitle]
== Zoom zoom
This slide will override the presentation transition and zoom!
[transition-speed=fast, %notitle]
== Speed
Choose from three transition speeds: default, fast or slow!
See the relevant reveal.js documentation for details.
== 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 the relevant reveal.js
documentation on the topic.
Note that only fade-in
is supported for lists at the moment.
Reveal.js supports a special class that will give all available screen space to an HTML node.
This class element is named stretch
.
Sometimes it’s desirable to have an element, like an image or video, stretch to consume as much space as possible within a given slide.
To apply that class to block simply use asciidoctor’s class assignment:
[.stretch]
In addition to background videos, videos can be inserted directly into slides. The syntax is the standard asciidoc video block macro syntax.
== Trains, we love trains!
video::kZH9JtPBq7k[youtube, start=34, options=autoplay]
By default videos are given as much space as possible.
To override that behavior use the width
and height
named attributes.
Reveal.js is well integrated with highlight.js for syntax highlighting.
Asciidoctor-reveal.js supports that.
You can activate highlight.js syntax highlighting (disabled by default) by setting the source-highlighter
document attribute as follows:
= Presentation Title
// [...] other document attributes
:source-highlighter: highlightjs
Once enabled you can write code blocks as usual:
== Slide Five
Uses highlighted code
[source, python]
----
print "Hello World"
----
By default [source]
blocks and blocks delimited by ----
will be highlighted.
An explicit [listing]
block will not be highlighted.
highlight.js
does language auto-detection but using the language="…"
attribute will hint the highlighter.
For example this will highlight this source code as Perl:
== Slide Five
[source,perl]
----
print "$0: hello world\n"
----
📎
|
Alternatively, you can use Coderay or Pygments as syntax highlighters if you are using the Asciidoctor/Ruby/Bundler toolchain (not Asciidoctor.js/Javascript/NPM).
Check the examples/ directory for examples and notes about what needs to be done for them to work.
They are considered unsupported by the asciidoctor-reveal.js project.
|
== Slide Six
Top slide
=== Slide Six.One
This is a vertical subslide
Slide Six uses the vertical slide feature of reveal.js
.
Slide Six.One will be rendered vertically below Slide Six.
Here is the relevant reveal.js
documentation on that topic.
The title slide is customized via Asciidoc attributes.
These are the global variable assigned at the top of a document under the lead
title that look like this: :name: value
.
This converter supports changing the color, image, video, iframe and transitions of the title slide.
Read the relevant reveal.js documentation to understand what attributes need to be set.
Keep in mind that for title slides you must replace data-
with title-slide-
.
The title slide is also added a title
CSS class to help with template customization.
Some content can be created with both slides and book in mind.
To mark slides split points you can use preprocessor conditionals combined
with a backend declaration.
Breaking points are set using slides with no title === !
wrapped in a
conditional: ifdef::backend-revealjs[=== !]
.
In the end, the whole document has to be compiled with the backend option:
-b revealjs
For example:
== Main section
=== Sub Section
Small +
Multiline +
intro
. very
. long
. list
. of
. items
ifdef::backend-revealjs[=== !]
Some overview diagram
ifdef::backend-revealjs[=== !]
Detailed view diagram
If you use the :customcss:
document attribute, a CSS file of the name given in the attribute is added to the list of CSS resources loaded by the rendered HTML.
Doing so, you can then easily override specific elements of your theme per presentation.
For example, to do proper position-independent text placement of a title slide with a specific background you can use:
.reveal section.title h1 {
margin-top: 2.3em;
}
.reveal section.title small {
margin-top: 15.3em;
font-weight: bold;
color: white;
}
If the :customcss:
attribute value is empty then asciidoctor-revealjs.css
is the CSS resource that the presentation is linked to.
Reveal.js supports a data-state tag that can be added on slides which gets rendered into <section>
tags.
In AsciiDoc the data-state
can be applied to a slide by adding a state attribute to a section like this:
[state=topic]
== Epic Topic
That state can be queried from Javascript or used in CSS to apply further customization to your slide deck. For example, by combining this feature with the CSS override one, you can alter fonts for specific pages with this CSS:
@import 'https://fonts.googleapis.com/css?family=Baloo+Bhai';
section[data-state="topic"] h2 {
font-family: 'Baloo Bhai', cursive;
font-size: 4em;
}
Asciidoctor font-based admonitions are supported. Make sure to add the following attribute to your document:
:icons: font
Here is an example slide:
== But first
WARNING: This presentation is dangerous!
Here are details about Asciidoctor’s Admonition icons support.
There are some attributes that can be set at the top of the document which they are specific of revealjs
converter.
📎
|
Default settings are based on reveal.js default settings.
|
Attribute | Value(s) | Description |
---|---|---|
|
beige, black, league, night, serif, simple, sky, solarized, white |
Chooses one of reveal.js’ built-in themes. |
|
<file|URL> |
Overrides CSS with given file or URL. Default is disabled. |
|
<file|URL> |
Overrides highlight.js CSS style with given file or URL. Default is built-in lib/css/zenburn.css. |
|
<file|URL> |
Overrides reveal.js directory. Example: ../reveal.js or https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0 |
|
true, false |
Display controls in the bottom right corner. |
|
true, false |
Display a presentation progress bar. |
|
true, false |
Display the page number of the current slide. |
|
true, false |
Push each slide change to the browser history. |
|
true, false |
Enable keyboard shortcuts for navigation. |
|
true, false |
Enable the slide overview mode. |
|
true, false |
Enables touch navigation on devices with touch input. |
|
true, false |
Vertical centering of slides. |
|
true, false |
Loop the presentation. |
|
true, false |
Change the presentation direction to be RTL. |
|
true, false |
Turns fragments on and off globally. |
|
true, false |
Flags if the presentation is running in an embedded mode (i.e., contained within a limited portion of the screen). |
|
<integer> |
Delay in milliseconds between automatically proceeding to the next slide.
Disabled when set to 0 (the default).
This value can be overwritten by using a |
|
true, false |
Stop auto-sliding after user input. |
|
true, false |
Enable slide navigation via mouse wheel. |
|
true, false |
Hides the address bar on mobile devices. |
|
true, false |
Opens links in an iframe preview overlay. |
|
none, fade, slide, convex, concave, zoom |
Transition style. |
|
default, fast, slow |
Transition speed. |
|
none, fade, slide, convex, concave, zoom |
Transition style for full page slide backgrounds. |
|
<integer> |
Number of slides away from the current that are visible. Default: 3 |
|
<file|URL> |
Parallax background image. Defaults to none |
|
<CSS size syntax> |
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 the
reveal.js
theme documentation and use the revealjs_customtheme
AsciiDoc attribute to
activate it.
Copyright © 2012-2018 Olivier Bilodeau, Guillaume Grossetie, Dan Allen, Rahman Usta, Charles Moulliard and the Asciidoctor Project. Free use of this software is granted under the terms of the MIT License.
See the LICENSE file for details.