Table of Contents

1 quick start

  1. jump to the last slide in this Org-mode file
  2. evaluate the emacs-lisp code block which defines the org-export-as-s5 command
  3. call M-x org-export-as-s5
  4. open the resulting page in your browser

2 set the style 

(setq org-export-html-style-extra
      (mapconcat
       #'identity
       '("<!-- configuration parameters -->"
         "<meta name=\"defaultView\" content=\"slideshow\" />"
         "<meta name=\"controlVis\" content=\"hidden\" />"
         "<!-- style sheet links -->"
         "<link rel=\"stylesheet\" href=\"ui/default/slides.css\" type=\"text/css\" media=\"projection\" id=\"slideProj\" />"
         "<link rel=\"stylesheet\" href=\"ui/default/outline.css\" type=\"text/css\" media=\"screen\" id=\"outlineStyle\" />"
         "<link rel=\"stylesheet\" href=\"ui/default/print.css\" type=\"text/css\" media=\"print\" id=\"slidePrint\" />"
         "<link rel=\"stylesheet\" href=\"ui/default/opera.css\" type=\"text/css\" media=\"projection\" id=\"operaFix\" />"
         "<!-- S5 JS -->"
         "<script src=\"ui/default/slides.js\" type=\"text/javascript\"></script>")
       "\n"))

3 set headline options 

(setq
 org-export-html-toplevel-hlevel 1
 org-export-headline-levels 1)

4 set the container class 

(add-hook
 'org-export-preprocess-hook
 (lambda ()
   (let ((class "slide"))
     (org-map-entries
      (lambda ()
        (save-excursion ;; from `org-export-remember-html-container-classes'
          (org-back-to-heading t)
          (put-text-property (point-at-bol) (point-at-eol)
                             'html-container-class class)))))))

5 post-processing

  • main container
    First we need to update the name of the main content container. 
    (add-hook 'org-export-html-final-hook
          (lambda ()
            (save-excursion
              (replace-regexp
               (regexp-quote "<div id=\"content\">")
               (mapconcat #'identity
                          `("<div class=\"layout\">"
                            "<div id=\"controls\"><!-- not edit --></div>"
                            "<div id=\"currentSlide\"><!-- no edit --></div>"
                            "<div id=\"header\"></div>"
                            "<div id=\"footer\">"
                            ,(format "<h1>%s</h1>" title)
                            "</div>"
                            "</div>"
                            ""
                            "<div class=\"presentation\">") "\n")))))
  • TOC
    Second we need to add the slide class to the table of contents. 
    (add-hook 'org-export-html-final-hook
          (lambda ()
            (save-excursion
              (replace-regexp
               (regexp-quote "<div id=\"table-of-contents\">")
               "<div id=\"table-of-contents\" class=\"slide\">"))))

6 wrap it up into a single function 

(defun org-export-as-s5
  (arg &optional hidden ext-plist to-buffer body-only pub-dir)
  "Wrap `org-export-as-html' in setting for S5 export."
  (interactive "P")
  (flet ((join (lst) (mapconcat #'identity lst "\n"))
         (sheet (href media id)
                (org-fill-template
                 (concat "<link rel=\"stylesheet\" href=\"%href\""
                         " type=\"text/css\" media=\"%media\" id=\"%id\" />")
                 `(("href" . ,href)
                   ("media" . ,media)
                   ("id" . ,id)))))
    (let ((org-export-html-style-extra
           (join `("<!-- configuration parameters -->"
                   "<meta name=\"defaultView\" content=\"slideshow\" />"
                   "<meta name=\"controlVis\" content=\"hidden\" />"
                   "<!-- style sheet links -->"
                   ,(sheet "ui/default/slides.css" "projection" "slideProj")
                   ,(sheet "ui/default/outline.css" "screen" "outlineStyle")
                   ,(sheet "ui/default/print.css" "print" "slidePrint")
                   ,(sheet "ui/default/opera.css" "projection" "operaFix")
                   "<!-- S5 JS -->"
                   ,(concat "<script src=\"ui/default/slides.js\" "
                            "type=\"text/javascript\"></script>"))))
          (org-export-html-toplevel-hlevel 1)
          (org-export-headline-levels 1)
          (org-export-preprocess-hook
           (list
            (lambda ()
              (let ((class "slide"))
                (org-map-entries
                 (lambda () (save-excursion
                         (org-back-to-heading t)
                         (put-text-property (point-at-bol) (point-at-eol)
                                            'html-container-class class))))))))
          (org-export-html-final-hook
           (list
            (lambda ()
              (save-excursion
                (replace-regexp
                 (regexp-quote "<div id=\"content\">")
                 (mapconcat #'identity
                            `("<div class=\"layout\">"
                              "<div id=\"controls\"><!-- no edit --></div>"
                              "<div id=\"currentSlide\"><!-- no edit --></div>"
                              "<div id=\"header\"></div>"
                              "<div id=\"footer\">"
                              ,(format "<h1>%s</h1>" title)
                              "</div>"
                              "</div>"
                              ""
                              "<div class=\"presentation\">") "\n"))))
            (lambda ()
              (save-excursion
                (replace-regexp
                 (regexp-quote "<div id=\"table-of-contents\">")
                 "<div id=\"table-of-contents\" class=\"slide\">"))))))
      (org-export-as-html arg hidden ext-plist to-buffer body-only pub-dir))))