Write Slides in Org Mode and export to Shower Presentation Engine

A shower file requires to:

• Include Shower CSS and JavaScript
• A body tag with class shower and one section with class slide per slide
• An optional initial header section to set the title of the slide

We are going to build a Shower HTML file by exporting an Org Mode file using the standard HTML export engine. The Org Mode file contains a bit of configuration and a bit of JavaScript, where the configuration is not expressive enough.

You can also directly view the source of this presentation or download a stripped-down template.

• Add #+HTML_CONTAINER: section to the header of your file. This ensures each heading is wrapped by a <section> tag
• Add the following JavaScript at the end of your presentation, which ensures body and section are assigned the correct classes:

<script> 
document.body.classList.add('shower'); 
document.querySelectorAll('section').forEach(function(section) { section.classList.add('slide'); });
</script>

This is achieved by exporting to HTML:

<header class="caption">
    <h1>Write Slides in Org Mode and export to Shower Presentation Engine</h1>
    <p>Isn't that amazing!</p>
</header>

... and you are all set!

The following slides provide some formatting tips to translate Org Mode markup language to the markup required by Shower CSS.

Org Mode markup works out of the box: bold, italic, verbatim, code, strikethrough, links and lists.

Underlined text is an exception: underlined is not really underlined. If it is important for you, add a CSS class to style .underline text, if you want.

Bulleted:

• slide 1
• slide 2

Ordered:

1. slide 1
2. slide 2

Despite having fewer stars, Shower is a nice framework producing good looking slides:

You can override some of the table styles, to achieve a simpler look. Here, for instance, I am overriding the background-image property of the rule .slide tr:not(:last-of-type) > *:

You can have a slide with no title… simply by not setting the title of the heading!

Use #+begin_quote:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.

You can even shout!

Shower produces nice slides publishable on the Web.

It is very simple to typeset the slides in Org Mode, adding a bit of JavaScript, and then use the standard HTML export facilities to produce a nice deck publishable on the web.

Go back to the blog post.