Skip to content

Latest commit

 

History

History
156 lines (103 loc) · 5.72 KB

example.org

File metadata and controls

156 lines (103 loc) · 5.72 KB

Example Presentation

Type T to begin the slide show.

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.