Skip to content

Latest commit

 

History

History
177 lines (119 loc) · 6.37 KB

example.org

File metadata and controls

177 lines (119 loc) · 6.37 KB

Org-HTML-Slideshow

Make slides from Emacs Org-Mode!

Making Slides

Org-Mode headlines with the :slide: tag will become slides.

Headlines Don’t Have to be Slides

This section doesn’t have a :slide: tag, so it will not become a slide, although it is still part of the exported HTML document.

Use Lists For Bullets

  • Use Org-Mode lists for bullet points
  • You can make nested bullet lists
    • With sub-lists
    • Like this

Or Low-Level Headings

By default

Org-Mode headings below level 3
Become bullets
Meaning they cannot be slides

This is configurable

See Export Options in the Org-Mode manual

Slides Can Be Nested

You can use the structure of the Org-Mode document to group your slides.

For example, this slide is a level-2 Org-Mode heading.

Slide Headings Can Be Nested

This slide is a level-3 Org-Mode heading, inside the previous one.

Presenter Notes

  • Slides can have presenter notes
  • Add a sub-heading with the :notes: tag

A Slide with Notes

  • This slide has notes
  • Notes are only visible to presenter

Notes

  • Presenter notes for this slide
  • Not displayed as part of the slide
  • Displayed in Presenter Preview window
  • Only one :notes: section per slide allowed

Source Code

Use begin_src/end_src blocks to include source code.

(defn example []
  (println "This is sample source code."))

Syntax Highlighting

  • Org-Mode HTML export uses htmlize.el
  • Code in exported HTML will match your current Emacs theme
    • Choose a theme that looks good on a projector!

Syntax Highlighting with CSS Classes

  • Set the Emacs variable
    • org-export-htmlize-output-type
    • to the symbol css
    • (Does not work as a buffer-local variable)
  • Htmlize.el will add SPAN tags with CSS classes
    • Named for each font face, e.g. org-comment
  • Examine HTML output to see class names
  • Add CSS styles to set colors

Images

  • Slides can contain images
    • Any file type a browser can display
  • See also these Emacs variables:
    • org-export-html-inline-images
    • org-export-html-inline-image-extensions
      • Controls which file types get exported
  • See Images in HTML Export in the Org-Mode manual.

Slide with Image

Make a file: link with the path to the image and no link text.

example-image.svg

This example image is public-domain clip art by Josiah / yoderj.

Styling

  • Use CSS styles to control appearance of slides
  • Extra tags on a slide become extra CSS classes on its HTML

Org-Mode Tag as CSS Class

  • This slide has the :blue_background: tag
    • Which is a class defined in projection.css
  • Make up your own tags
    • Add them to the CSS file

Placing Stylesheets/JavaScript

Include the stylesheets and JavaScript at the bottom of your Org-Mode file.

They must go at the bottom because the Google Closure Library does not support an on-DOM-ready event. See the Closure mailing list discussion for an explanation.

Warning About Hidden Headlines

Stylesheets and JavaScript will not be loaded if the last headline in your Org-Mode file is hidden by any of:

  • COMMENT at the start of the heading
  • #+COMMENT at the start of the line
  • :noexport: tag, or missing :export: tag

See Comment lines and Selective export in the Org-Mode manual for details.

The End

Sometimes it’s safest to add an “empty” heading at the end of your document to make sure the stylesheets and JavaScript are included.

Slide with <video> tag

Slide with <audio> tag

Slide with youtube video