Level 1 and level 2 slides in reveal.js using pandoc

Question

I am generating a slideshow in markdown to be converted by pandoc into html (with pandoc -s -S -t revealjs test.md -o test.html).

The reveal.js framework allows a 2D setup: grouping of slides within slide subsets "vertically", and grouping of the slide subsets horizontally. In markdown, it can be achieved like this:

# Head1

## Below 1

text below 1

## Below 2

text below 2

# Head 2

This generates the expected output. The result has four slides, arranged as follows:

[  Head 1 ] [ Head 2 ]
[ Below 1 ]
[ Below 2 ]

However, I would like to have some further content in the "Head 1" slide. This is possible in reveal.js, but the following markdown is not correctly processed by pandoc:

# Head1

Head text 1

## Below 1

text below 1

## Below 2

text below 2

# Head 2

Because the slide level becomes 1 rather than 2, instead of four slides, I get two (one for each level 1 header). I can force the slide level to be 2 using an option to pandoc:

pandoc -s -S -t revealjs test.md -o test.html --slide-level 2

but then I get the first arrangement again -- losing any content that was directly under "Head 1".

Any thoughts?

Dedans

I'm encountering the same problem with pandoc -t revealjs -s -o index.html index.md. Couldn't really find a workaround :( – Lydell

Answer 1

Since Pandoc 2.7 (March 2019):

Slide show formats behavior change: content under headers less than slide level is no longer ignored, but included in the title slide (for HTML slide shows) or in a slide after the title slide (for beamer). This change makes possible 2D reveal.js slideshows with content in the top slide on each stack (#4317, #5237).

Given this input test.md file:

# Head1

Head text 1

## Below 1

text below 1

## Below 2

text below 2

# Head 2

Running:

pandoc -s -t revealjs test.md -o test.html --slide-level 2

will produce a reveal.js slideshow where the first slide contains:

<h1>Head1</h1>
<p>Head text 1</p>

---

Before Pandoc 2.7, if you want to nest slides to level 2, you cannot put content under a level 1 header. This limitation was by design. According to developer John MacFarlane, in June 2015:

Pandoc has a method of carving content into slides (described in the User's Guide) that works the same for all slide formats, so you can use the same source for reveal.js and beamer. That is what motivated the present system, though I'm open to a better way, as long as it works uniformly with all formats.

Lichfield

Answer 2

Update

As of pandoc 2.7:

Slide show formats behavior change: content under headers less than slide level is no longer ignored, but included in the title slide (for HTML slide shows) or in a slide after the title slide (for beamer). This change makes possible 2D reveal.js slideshows with content in the top slide on each stack (#4317, #5237).

(emphasis added). I have not tested it yet though.

Previous answer

This works for me with the current pandoc vesion

# That presentation

## dummy slide

<!--javascript to remove dummy slide-->
<script>
document.getElementById("dummy-slide").remove();
</script>

<!--end dummy slide-->
</section>

<section>
<section class="titleslide slide level1">
<h1>Head 1<h1>
Head text 1

<!-- dummy-slide creates it's section end tag -->
<!-- </section> -->

## Below 1

text below 1

## Below 2

text below 2

</section>

<!-- need extra end tag before next section -->
</section>

<section class="titleslide slide level1">
<h1>Head 2<h1>
Head text 1
</section>

# Head 3

It kinda removes the idea of markdown and might not work with some previous or later versions of Pandoc. I though still found it useful when working with Rmarkdown. The above is produced with

---
title: "That presentation"
output: 
  revealjs::revealjs_presentation:
    keep_md: TRUE
---

## dummy slide

<!--javascript to remove dummy slide-->
<script>
document.getElementById("dummy-slide").remove();
</script>

<!--end dummy slide-->
</section>

<section>
<section class="titleslide slide level1">
<h1>Head 1<h1>
Head text 1

<!-- dummy-slide creates it's section end tag -->
<!-- </section> -->

## Below 1

text below 1

## Below 2

text below 2

</section>

<!-- need extra end tag before next section -->
</section>

<section class="titleslide slide level1">
<h1>Head 2<h1>
Head text 1
</section>

# Head 3

Aquiver

Answer 3

If I understood you correctly, the following should do the trick:

# Head1

---

Head text 1

## Below 1

text below 1

## Below 2

text below 2

# Head 2

Compile with the first command you mentioned:

pandoc -s -S -t revealjs test.md -o test.html

Frederick

No, this puts "Head text 1" in its own slide. OP wants "Head text 1" to be part of the "Head 1" slide. – Lichfield

Answer 4

There is a workaround provided here (https://github.com/rstudio/revealjs/issues/40) which suggests the following (works ok for me):

---
title    : Title
date     : Dec 22, 2016
output   : 
    revealjs::revealjs_presentation
---

<section class="titleslide level1">
<h1>TOP SLIDE</h1>

Some blabla

## SUBSLIDE

Some sub-blabla
</section>

# Next section slide

## Next subslide

Text as per standard layout

Frilling

For me this workaround wrks for the very first section only... :-( Sad as it defies the purpose of using reveal.js 2d presentations... – Cranmer