I've put the call out on https://twitter.com/jaredmorgs/status/608570379586535424 about getting the reveal.js submodule working on my newly created Reveal deck from the Asciidoctor Presentation (damn, I love this slide tech!).

https://github.com/jaredmorgs/Asciidoctor_Presentation/tree/gh-pages

Reveal is such a cool slide technology, and it would be great to enable users with some tips about getting the submodule working correctly on gh-pages.

Also, as a self-serving requirement, I want to include this in my Asciidoctor Reveal JS presentation I'm working on, and it would be sweet to dogfood both the slides source and the hosted deck on GitHub.

Not sure if it is a nag message or something that should be addressed. Not sure whether the bug in the unpublished README is what is causing this.

[jmorgan@localhost Asciidoctor_Presentation]$ asciidoctor -T ../asciidoctor-reveal.js/templates/slim Asciidoctor_Tech_Demo_Slides.adoc
Format :html5 is deprecated, use :html
Format :html5 is deprecated, use :html
Format :html5 is deprecated, use :html
Format :html5 is deprecated, use :html
Format :html5 is deprecated, use :html
Format :html5 is deprecated, use :html
Format :html5 is deprecated, use :html
Format :html5 is deprecated, use :html
Format :html5 is deprecated, use :html

For the record, the presentation builds from https://github.com/jaredmorgs/Asciidoctor_Presentation so it can't be that bad.

I think that if I'm planning on showing folks how to make slides from .adoc, this might freak out some new folks. ;)

Zoom (ALT +clic) is not centering the screen correctly with firefox

Subtitle partitioning is not enforced on the first slide with the reveal.js backend.

Reveal.js has 4 options related to presentation size, which I have found very useful for large screen / projector sizes where you can easily fit a big image and a few lines of text beneath it, by setting width and height to larger values. It would be useful to have at least those two options, and possibly also the minScale and maxScale options as well.

Add Font Awesome to the presentation if the value of the icons attribute is font to support font-based admonition icons and the inline icon macro.

Reveal.js has a math plugin but it seems there's no way to enable it from the template.

PS: Amazing work guys!

Footnotes do not seem to appear:

= A Test Document
Author Name
:revealjs_theme: simple
:revealjs_transition: none
:revealjsdir: https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.0.0/
:stem: latexmath
:imagesdir: imgs

== Test

This is some text with footnote:[An example footnote.]

The text of the footnote doesn't seem to show up in the HTML:

<section id="_test"><h2>Test</h2><div class="paragraph">
  <p>This is some text with 
    <span class="footnote">[<a id="_footnoteref_1" class="footnote" href="#_footnote_1" title="View footnote.">1</a>]</span>
  </p>
</div></section>

There's more HTML than that, of course, but nothing with the footnote text in it.

The background image, controlled by the data-background block attribute and related attributes, doesn't work on the title slide.

In general, the <section> element generated from the document title of the AsciiDoc document should have all the same capabilities as the <section> element generated from a section title.

When I use this in my slide:
icon:cogs[]
it works when I render in HTML5
it does not show when I render in revealJS

For example, while asciidoctor supports the kbd:[F1] macro and we do the proper rendering in this back-end, since reveal.js doesn't have the CSS for that feature, the kbd macro does nothing on the visual output.

There are several things unsupported. Let's track them here:

• kbd macro (related #76, #276)
• tables (#56, #42, #29, #23)
• quotes
• source code call-outs (#54)
• .unstyled role to create lists without bullets

Bugs in jade templates:

• block_thematic_break template is missing (fixed in #90)
• highlightjs issue (#88)

Small missing features in the jade templates:

• feature: add revealjsdir attribute support to control the location of reveal.js (make sure it works both on local filesystem paths (cross-platform) and URL (ex: https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.3.0/)
• feature: speaker notes
• feature: vertical slides
• feature: concealed titles
• feature: :customcss: (#85)

Other misc things:

• jade was renamed pug (#102)
• have a way to quickly test templates changes (current method)
• integrate rendering of the tests in the Makefile
• document.jade: Support attr - asset_uri_scheme, revealjs_customtheme, iconfont-name
• document.jade: Slim reference FontAwesome 4.3 while jade 4.4.

To be consistent with how images are resolved in AsciiDoc, the background images (currently the data-background-image attribute on a section) should be resolved relative to the imagesdir directory. This matches the behavior of the image macros.

We should be careful to do this both for the data-background and data-background-image attributes, or we should drop the data-background attribute (since it potentially conflicts with other attributes).

Load highlight.js from a CDN like we do with the HTML5 output instead of using the bundled version. Of course, we can still recognize the property of highlightjs dir so that it's possible to use the bundled version, but we should be consistent with the HTML5 output by default.

Setup the repository so that Bower can be used to fetch the templates. This will allow Bower to be used to manage both Reveal.js and the templates so that no manual cloning steps are required.

There are two steps required here:

1. Create a bower.json file that identifies which files to fetch / ignore
2. Register the repository in the Bower index

(2) is technically optional as the repository can be referenced using the git URL, but it's nicer if we can get into the index officially.

I've got a document which content is suitable for both PDF and reveal presentation.
Yet, as pointed out by #59 title level 3 and below are ignored, thus ending in content being unreadable.

In addition to #59 I would say that "level" based splitting is not enough: as an example, I’ve got a section that holds a list and two schemas.
Only the list part is visible.
I would like to be able to show the two schema on different slides without altering the PDF display (thus not using <<< as slide splitter)

Like this:

[.epic]
== Epic slide

Doesn't add an epic class to the <section> HTML tag.

This makes CSS customization harder than it should be.

Hi,
If I put an image in the title slide, it gets printed in every slides! (at the top of the slide).

include::_settings_reveal.adoc[]

= My title
My name

image:https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/2000px-Tux.svg.png[width=150]

Hi !
The following code is working with the html5 backend, it prints a table with an image and a text, both vertically aligned. However, with the reveal.js backend, the vertical alignment is not honored.

[cols=".^1,.^2"]
|====================
| image:https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/2000px-Tux.svg.png[width=150] | I Love Linux
|====================

Revealjs has a feature called stretch to give the focus to a specific HTML element: https://github.com/hakimel/reveal.js#stretching-elements

It works by using javascript to assign a style with height and width to the specific element. The javascript is not executed when changing slides since I tried setting the attribute directly in chrome's developer console and it did not work.

One problem is the following limitation of the stretch feature:

Only direct descendants of a slide section can be stretched

Currently, this back-end wraps in HTML tags heavily. Images are wrapped in imageblock then a div.content and finally the image tag (if there's no link). The nesting means stretch won't work.

We need to think about what we can do to benefit from this stretch class which applies directly the exact amount of pixels we can expand to without clobbering the rest of the content.

reveal.js on page open checks if url contains a slide 'id' as hash (function readURL())
sections generated by asciidoctor-reveal have id starting with underscore
reveal.js checks if the id found is valid

// Ensure the named link is a valid HTML ID attribute
            if( /^[a-zA-Z][\w:.-]*$/.test( name ) ) {

and it's always Not valid so it starts from beginning

I made a workaround in /asciidoctor-reveal.js/templates/slim/section.html.slim, adding 'slide' before id:
'slide'+@id

While looking for a way to get a list of all images so I can easily package a presentation for the web, I realized that we don't use image_uri anywhere.

$ grep -rn background-image asciidoctor-reveal.js/
asciidoctor-reveal.js/templates/slim/document.html.slim:73:          - bg_image = (attr? 'title-slide-background-image') ? (image_uri(attr 'title-slide-background-image')) : nil
asciidoctor-reveal.js/templates/slim/document.html.slim:80:            data-background-image=bg_image
asciidoctor-reveal.js/templates/slim/section.html.slim:5:    section id=(hide_title ? nil : @id) data-state=(attr 'data-state') data-transition=(attr 'data-transition') data-transition-speed=(attr 'data-transition-speed') data-background=(attr 'data-background') data-background-size=(attr 'data-background-size') data-background-repeat=(attr 'data-background-repeat') data-background-transition=(attr 'data-background-transition') data-background-image=(attr 'data-background-image')
asciidoctor-reveal.js/templates/slim/section.html.slim:14:  section id=(hide_title ? nil : @id) data-state=(attr 'data-state') data-transition=(attr 'data-transition') data-transition-speed=(attr 'data-transition-speed') data-background=(attr 'data-background') data-background-size=(attr 'data-background-size') data-background-repeat=(attr 'data-background-repeat') data-background-transition=(attr 'data-background-transition') data-background-image=(attr 'data-background-image')

vs

$ grep -rn image_uri asciidoctor-reveal.js/
asciidoctor-reveal.js/templates/slim/inline_image.html.slim:19:    - src = (@type == 'icon' ? (icon_uri @target) : (image_uri @target))
asciidoctor-reveal.js/templates/slim/document.html.slim:73:          - bg_image = (attr? 'title-slide-background-image') ? (image_uri(attr 'title-slide-background-image')) : nil
asciidoctor-reveal.js/templates/slim/block_image.html.slim:6:        img src=image_uri(attr :target) alt=(attr :alt) width=(attr :width) height=(attr :height) style=((attr? :background) ? "background: #{attr :background}" : nil)
asciidoctor-reveal.js/templates/slim/block_image.html.slim:8:      img src=image_uri(attr :target) alt=(attr :alt) width=(attr :width) height=(attr :height) style=((attr? :background) ? "background: #{attr :background}" : nil)

It looks like we forgot to use it in section templates' data-background-image cases.

Reading image_uri's documentation I have the feeling we should be using that everywhere.

Opened the ticket as a reminder to fix this later.

Currently, only a single author is shown without his/her e-mail address / URL. Implement a more complete author block that shows all the authors and includes the e-mail address / URL if present.

In addition to recognizing the ! as an anonymous slide (a slide with no title), we should also allow the title to be hidden. This way, the title can be part of the semantics of the document and present in the slide notes, but hidden from presentation mode.

One way is to allow the use of the notitle option:

[%notitle]
== Title not shown

content

Another is to recognize a title that begins with !.

== ! Title not shown

content

The first option is more semantically correct. The second might be useful in a pinch.

The slim template engine changed how it handles whitespace in 3.0.0. The templates need to be upgraded to work with the lastest version of slim.

https://github.com/slim-template/slim/blob/master/CHANGES#L15

I want to use the reveal.js export for asciidoctor but I have an problem and don't see how to do it :
I want to write a presentation that use many titles levels and would like each title to be on it's own slide :

== A title : should be one slide
=== A subtile : should be on it's own slide
==== A sub-subtile : should be on it's own slide

The titles levels enable to keep the structure clean when editing the content and when doing an export in a single page.

From what I understand, I should modify section.html.slim file but I don't understand what I should change, and I think you could answer me in a few seconds :-)

If you're think this feature would be uselful to others I can probably create a PR about it with a switch.

A bug present in both deck.js and reveal.js related to the fact that block_preamble is processed after the title slide and will slip the content through inside a <div> which will not be properly nested inside the title's <section> element.

Already discussed here: http://discuss.asciidoctor.org/Using-Preambel-with-deck-js-scrambles-output-td2154.html

I don't think the solution of having the preamble in its own slide to be the proper one with regards to what one would expect when writing slides. I tried and failed to implement the second solution mentioned in the discussion.

@mojavelinux I tried listing attributes and can't find any attribute to match that would say: "this is the first slide". A section number would do. Also, it is unclear to me how to grab content of another block from within another template. Help appreciated :)

I have a long running unordered list and I want to split this list over two slides. The pagebreak (<<<) didn't work. Any ideas?

With reveal.js the produced HTML is a static html page. I lost a couple of hours to discover that. At least it should be stated in the readme file until compatibility is set.

Right now, when using :source-highlighter: pygments, the background color of the code blocks will still be the color of the zenburn background, and not the appropriate one from pygments.

This might be a reveal.js issue (hakimel/reveal.js#1114), but I haven't quite figured it out.

When trying to embed a video in a slideshow, the video doesn't show up at all because its missing the "http:". From my asciidoc:

video::70589461[vimeo]

From the exported reveal slideshow

<div class="videoblock"><div class="content"><iframe src="//player.vimeo.com/video/70589461" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div></div>

Looking at the block_video.html.slim reveals:

    - when 'vimeo'
      - start_anchor = (attr? :start) ? "#at=#{attr :start}" : nil
      - delimiter = '?'
      - autoplay_param = (option? 'autoplay') ? "#{delimiter}autoplay=1" : nil
      - delimiter = '&' if autoplay_param
      - loop_param = (option? 'loop') ? "#{delimiter}loop=1" : nil
      - src = %(//player.vimeo.com/video/#{attr :target}#{start_anchor}#{autoplay_param}#{loop_param})
      iframe width=(attr :width) height=(attr :height) src=src frameborder=0 webkitAllowFullScreen=true mozallowfullscreen=true allowFullScreen=true

The YouTube block is similarly missing its protocol. Forgive me, if this is not broken and I'm missing something simple here...

Hello.
The font icons for source code callouts (<1>, for instance) does not exist in the reveal.js backend.
Could you add them, please?
Thanks.

See https://github.com/hakimel/reveal.js/#lazy-loading

In some cases the background image is more than a design element, it is the primary content of a slide. This is the case when a slide is shown without text but serves an educational or informative purpose in the presentation. In this case, the image should be defined using an image macro rather than as an attribute on the section.

We should recognize slides that contain an image macro with one of the present positioning roles and promote it to the background image of the slide.

Examples:

[#stuck]
== !

[.cover]
image::stuck.jpg[Goose with head between bars]

I've identified at least two positional roles so far:

• cover
• contain

Get the code annotations (aka callouts) working. We may need to ship an auxiliary stylesheet that is appended to the reveal.js theme for AsciiDoc structural elements such as callouts. We did something similar in the deck.js backend.

I'm not sure what I'm doing wrong, but the output for my file does not include the highlight.js dependency. As far as I can tell, this should be there by default. I'm using reveal.js 2.62. These are the only dependencies I'm seeing:

  dependencies: [
      { src: 'reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
      { src: 'reveal.js/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
      { src: 'reveal.js/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },

      { src: 'reveal.js/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
      { src: 'reveal.js/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }

• missing documentation that it is supported (at least link to upstream's)
• default sizes not useful: without height= or width= video was about 120x120px
• add support for a background and canvas parameter that would background it using data-background-video (#52)

RevealJS backend by asciidoctor has been fantastic and has saved me a lot of time and has built impressive presentations. It was all so easy.

I'm trying to get tables right in my presentation and have the following issues -

1. Tables do not honor the frame="topbot" or all, or none attributes. Same applies for grid
2. I wanted table cells to be compact to fit more data. I can fit 6 rows while 8 could be possible if cell height is reduced. Is there way to reduce cell height? I remember being a "compact" option for PDF backend I think. Any help is appreciated.

I have not found a way to align left paragraphs.

I tried using a role, but the class name is injected inside a span.

I actually followed the currently staged version on http://asciidoctor.org/docs/install-and-use-revealjs-backend/ and got it working, but I noticed when I went here to report an unrelated issue, the README was definitely different.

I would recommend rebuilding all Asciidoctor pages to ensure the latest data is live.

Need to add code like this to the repository: https://github.com/asciidoctor/asciidoctor-bespoke/blob/master/lib/asciidoctor-bespoke/converter.rb

As discussed in #68

This is an excellent idea to move to a separate project the asciidoctor backend of revealjs. Nevertheless, there is still an issue as there is no link between the version supported of revealjs and this backend.

I know that the purpose of this repo is not at all to maintain what revealjs did but that should be easier for our users that there is a git submodule mapped to a tag version of this backend or something else (bower, ruby-bower, ...).

This is what I have done with hyla project where revealjs is embedded (css, js) - https://github.com/cmoulliard/hyla/tree/master/lib/resources/revealjs and where there is a command that the user can use to create a project for a slideshow, .... including also a config.yaml file with parameters (https://github.com/cmoulliard/hyla/blob/master/documentation/scripts/generate_slideshow_revealjs_config.sh)

Try this with asciidoctor with and without this backend:

[grid="all",frame="all",options="header"]
|==========================
| Test | Test 2 | Test 3
| More | Again  | And again
|==========================

The grid and frame shows up for regular asciidoctor, but not with reveal.js. It seems that there are some classes missing:

table.grid-all th.tableblock,table.grid-all td.tableblock{border-width:0 1px 1px 0}
table.grid-all tfoot>tr>th.tableblock,table.grid-all tfoot>tr>td.tableblock{border-width:1px 1px 0 0}
table.grid-cols th.tableblock,table.grid-cols td.tableblock{border-width:0 1px 0 0}
table.grid-all *>tr>.tableblock:last-child,table.grid-cols *>tr>.tableblock:last-child{border-right-width:0}
table.grid-rows th.tableblock,table.grid-rows td.tableblock{border-width:0 0 1px 0}
table.grid-all tbody>tr:last-child>th.tableblock,table.grid-all tbody>tr:last-child>td.tableblock,table.grid-all thead:last-child>tr>th.tableblock,table.grid-rows tbody>tr:last-child>th.tableblock,table.grid-rows tbody>tr:last-child>td.tableblock,table.grid-rows thead:last-child>tr>th.tableblock{border-bottom-width:0}
table.grid-rows tfoot>tr>th.tableblock,table.grid-rows tfoot>tr>td.tableblock{border-width:1px 0 0 0}
table.frame-all{border-width:1px}
table.frame-sides{border-width:0 1px}
table.frame-topbot{border-width:1px 0}

Those rules show up in the regular asciidoctor document, but not the asciidoctor-reveal.js one.

Hi,

as I don't know where to put my questions or doubt on for asciidoctor-reveal.js project I've decided to create an issue. If this is wrong way could you please close this and refer me to the correct place?

Nevertheless I would like to have possibility to define a class for images which are part of the slide deck. What do you think?

I've tried to do it in this way
ochaloup@ebed6b9

Thanks
Ondra

The slide background color can only be set by hard-coding the value in the data-background-color attribute. This requirement has the following drawbacks:

• it clutters up the template
• it diminishes the semantic quality of the source document
• it ties the styling to a single theme

Better would be to allow the background color to be set using a role. The role introduces a layer of indirection between the content and the presentation and it can be used to change the color across all corresponding slides.

Unfortunately, reveal.js doesn't support setting the background color of a slide via CSS. The reason is because reveal.js reads the background color directly from the data-background-color attribute on the section and applies it to a floating canvas layer. If you attempt to set the background color of a slide using CSS, you'll notice that it only colors the content portion of the slide.

Since we have complete control over the generated HTML, we can patch in a solution that allows the background color to be controlled using a role. I've come up with two possible solutions.

Solution 1: Read the color value from an attribute

If we agree on preset section role names, we could map the role to an AsciiDoc attribute and assign that value to the data-background-color attribute on the section when the HTML is generated. Here's an example:

= My Presentation
Presenter Name
:topic-background-color: red

[.topic]
== Topic Slide

== Content Slide

content

The resulting section element for the "Topic Slide" would be something like:

<section class="topic" data-background-color="red"><h2>Topic Slide</h2></section>

We could follow a fixed pattern so that we don't have to decide on preset class names (something like section-*).

Solution 2: Use JavaScript to assign the data-background-color dynamically

We could inject JavaScript that runs after the presentation loads to read the effective background of each slide (from calculated styles) and apply those background-color values to the data-background-color attribute while removing the background-color from the section. This is the cleanest approach, but will require some research.

I'm happy with Solution 1 until we can get something more formal in place. Perhaps we can implement as two steps since Solution 1 honors the same contract in the AsciiDoc content as Solution 2...it just requires a shim (the document-level color attribute).

Reveal.js recognizes a handful of data attributes (attributes with the prefix data-) for setting the background properties of a slide. Currently, the Asciidoctor section template passes these attributes through verbatim. I don't think we need the data- prefix and therefore propose to drop it.

The data- prefix is required in the HTML as a namespace. We don't need this prefix in the AsciiDoc document as it doesn't add any semantic value nor is is required for compliance.

Before

[data-background-image=evil-minion.png]
== Lab results

After

[background-image=evil-minion.png]
== Lab results

For backwards compatibility, we could allow both, but we should definitely only document the attribute names without the data- prefix.

Now the project license is not clearly stated, which complicates reuse, modifications, and even distribution of asciidoctor-reveal.js based presentations.

Would be nice to have fragment support for sections other than lists (like code blocks or text).

Basically would be good to be able to recreate this slide:
http://lab.hakim.se/reveal-js/#/fragments

The following will not generate the source block.

[cols="2*"]
|===
a|
[source,groovy]
----
myTask {
    mySources file( 'path/foobar' )
    mySources new File( 'path2/foobar' )
    mySources 'file3', 'file4'
    mySources { "lazy evaluate file name later on" }
}
----
a|
* Allow ability to:
* Use strings and other objects convertible to `File`
* Append lists
* Evaluate as late as possible
* Reset default values
|===

If both columns contain a source block then both are generated.

Is it possible to do something like what this slide deck does - https://speakerdeck.com/pardom/kotlin-new-hope-in-a-java-6-wasteland/ on slide 31?