Org Mode and Shower CSS
Writing Shower Slides with Org Mode and HTML Export
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.
Go on… show me how!
Sure thing!
Approach:
- include Shower CSS and JavaScript using
#+HTML_HEAD:
- use Org Mode
#+HTML_CONTAINER:
to wrap each heading withsection
, rather than the defaultdiv
- add a CSS rule
div { display: contents; }
with#+HTML_HEAD:
to properly manage thediv
Org Mode writes to wrap content (and which I did not manage to remove from the standard exporting function) add two lines of JavaScript to add the classes required by Shower, that is, the
shower
class forbody
and theslide
class forsection
:#+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
Conclusion
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.