Org Mode and Shower CSS

I like preparing slides using a CSS framework, such as Reveal.js or Shower. Org Mode can easily export to Reveal, using, for instance, ox-reveal, org-re-reveal, but there is no similar option for Shower.

It turns out, however, that it is quite easy to export slides in the Shower format using Org Mode’s default HTML export engine. We just need a bit of configuration and a few lines of JavaScript. The resulting file has little specific markup and the publication does not rely on any external package.

Sure thing!

Approach:

1. include Shower CSS and JavaScript using #+HTML_HEAD:
2. use Org Mode #+HTML_CONTAINER: to wrap each heading with section, rather than the default div
3. add a CSS rule div { display: contents; } with #+HTML_HEAD: to properly manage the div Org Mode writes to wrap content (and which I did not manage to remove from the standard exporting function)

4. add two lines of JavaScript to add the classes required by Shower, that is, the shower class for body and the slide class for section:

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

   Notice that this can also be achieved setting the :HTML_CONTAINER_CLASS: in each heading. The JavaScript, however, localizes the changes in a single point and makes the resulting file more reusable.

In details:

• view a presentation which describes the required configuration
• examine the Org Mode file used to generate the presentation
• download a stripped-down template

Exporting Shower.js slides with Org Mode’s default HTML export engine is a straightforward process that doesn’t necessitate external packages and which can be obtained using little configuration.

This is a big advantage with respect to other formats, such as Reveal.js whose richer set of features comes also with more dependencies and files which require more custom markup.