Pandoc: Using pandoc to produce reveal.js slides

[jaydixit]

https://github.com/jgm/pandoc/wiki/Using-pandoc-to-produce-reveal.js-slides

When using pandoc to produce reveal.js slides from markdown source, is there a way to specify per-slide background images, a la

<section data-background="http://example.com/image.png">
<h2>This slide will have a full-size background image.</h2>
</section>

[jgm]

+++ Jay Dixit [Nov 10 13 01:57 ]:

When using pandoc to produce reveal.js slides:

[1]https://github.com/jgm/pandoc/wiki/Using-pandoc-to-produce-reveal.js
-slides
1. Is there a way to produce reveal.js slides from org-mode, or only
from markdown?

You could in principle use any format that pandoc supports as an input
format, but org-mode is only supported as an output format at the
moment.

2. When using pandoc to produce reveal.js slides from markdown, is
   there a way to specify per-slide background images, a la
   This slide will have a full-size background image.

Put an id attribute on the header; it will go on the <section> tag
that constitutes the slide. Then add something to your CSS to add an
image to that <section>. (I am no CSS expert, but I assume this is
possible.)
http://www.w3schools.com/cssref/pr_background-image.asp

[bsamadi]

background-image is not a good option because the background image is cropped to the size of the text. How can I set data-background?

[jgm]

This should have been my original response:

% pandoc -t revealjs
# Foo {data-background="my.png"}

hi
^D
<section id="foo" class="slide level1" data-background="my.png">
<h1>Foo</h1>
<p>hi</p>
</section>

[bsamadi]

Thank you!

[sjackman]

With data-background, is there a way to specify the opacity of the image?
Related to https://github.com/hakimel/reveal.js/issues/1279 and https://github.com/hakimel/reveal.js/issues/1973

[mberasategi]

How about other attributes for slides with no header? To clarify, I am trying to vertically center certain slides _only_, which can be done by adding the center class to the slide. For slides with a header in Markdown, ## My title {.center} is working well, but how about if I have a "text only" slide?

Apparently reveal.js allows to add a certain class to the section element using <!-- .slide: class="center" --> after each --- for each slide. This is not rendering correctly through pandoc, though.

[jgm]

You can use an empty header with attribute

# {.class}

[mberasategi]

Neat, thanks!