Customizing and Setting Up HTML Presentations Using org-export
Table of Contents
1. Setup
Live test on Emacs 30.2: =C-c C-x p= is bound to =org-set-property=, and setting =:HTML_CONTAINER_CLASS: slide= via that command on a heading does add =slide= to that heading's exported =<div class="outline-N ...">= container. =org-export= is also a real top-level customize group (parent of =org-export-html= and siblings), still present in current org-mode.
- customize-group org-export
- Run git submodule init & git git submodule update
In the document on any slide:
- C-c C-x p HTML_CONTAINER_CLASS RET slide
2. Options
2.1. org-html-presentation (new javascript)
Tailor the JavaScript and CSS to the output.
2.2. reveal.js (modify html exporter)
Checked against the reveal.js 2.6.2 tag (the last pre-3.0 release, July 2015, contemporary with this 2016 note) on GitHub — it ships exactly these paths: css/reveal.min.css, css/theme/default.css, lib/css/zenburn.css, lib/js/head.min.js, js/reveal.min.js. reveal.js 3.0 (released the same month as this note) moved everything under dist/ and plugin/, so this boilerplate is tied specifically to the pre-3.0 layout.
Requires boilerplate for the base selectors.
#+BEGIN_HTML
</div><!-- .slides -->
</div><!-- .reveal -->
<script src="reveal.js/lib/js/head.min.js"></script>
<script src="reveal.js/js/reveal.min.js"></script>
<script>
Reveal.initialize({});
</script>
#+END_HTML
3. Related
- Org Mode Syllabus – export in the wider syllabus
- Org Publish Experience – org export as this site does it now