Skip to content

Latest commit

 

History

History
111 lines (74 loc) · 3.8 KB

example.org

File metadata and controls

111 lines (74 loc) · 3.8 KB
Raw

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.

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 slides!
    • Tip: launch Emacs with -q to skip your custom settings

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

The End

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