Org-IO Slide Demo & Example

List

Nested List

Item 1
Item 2
- Depth 2
- Depth 2
  - Third
  - Third

- Item 1
- Item 2
  + Depth 2
  + Depth 2
    * Third
    * Third

Build List

Show one by one:

Item 1
Item 2
Item 3

Show one by one:
#+ATTR_HTML: :class build
- Item 1
- Item 2
- Item 3

Build + Fade List

Show one by one:

Item 1
Item 2
Item 3

Show one by one:
#+ATTR_HTML: :class build fade
- Item 1
- Item 2
- Item 3

Numerated List

First
Second
Third
- Item
- Item

1. First
2. Second
3. Third
   - Item
   - Item

Build Nested List

Build me
Build me
- Build me
- Build me
  - No build
  - No build

#+ATTR_HTML: :class build
- Build me
- Build me
  #+ATTR_HTML: :class build
  + Build me
  + Build me
    * No build
    * No build

Block

Code Block

A source block looks like this:

(def hello-world ()
     (message "hello world!"))

Just type <s in a newline, then press [TAB] to expand to #+BEGIN_SRC ... #+END_SRC.
Remember to specify the language name (e.g. emacs-lisp).

#+BEGIN_SRC emacs-lisp
  (def hello-world ()
       (message "hello world!"))
#+END_SRC

Highlight in Code Block

Press h to highlight the code.
Simply wrap the area you want with =<b> … </b>= in source block.

(defun org-ioslide-quote-block (quote-block contents info)
  (let* ((parent (org-export-get-parent-headline quote-block))
	 (slide-prop (org-element-property :SLIDE parent))
	 <b>(--make-sign (function (lambda (string)
			   (replace-regexp-in-string
			    "^ *\\(&#x201[34];\\)\\(.+\\)\\(<br */>\\|\n\\)"
			    "<span class='float-right'>\\1\\2</span>\\3" string))))</b>)
    (if (and slide-prop (string-match "segue" slide-prop))
	(format "<q>\n%s</q>"
		   <b>(funcall --make-sign contents)</b>)
      (format "<blockquote>\n%s</blockquote>"
	      (save-match-data
		(replace-regexp-in-string
		 "</span>\n</p>"
		 "</span><br  />\n</p>"
		 <b>(funcall --make-sign contents)</b>))))))

Quote Block

Type <q in a newline, then press [TAB] to expand to a quote block (Use \\ to break line forcely.):

一個人因為講實話而成為英雄，換句話說是整個社會都在說謊。
一人は真実を言うだけからヒーローになる。換言すれば、この社会は全部が嘘している。\ If a person is treated as a hero for saying truth, that is the whole society are lying.\

– 柯文哲 Wen Jei, Ko. (2014)

#+BEGIN_QUOTE
一個人因為講實話而成為英雄，換句話說是整個社會都在說謊。\\
一人は真実を言うだけからヒーローになる。換言すれば、この社会は全部が嘘
している。\\
If a person is treated as a hero for saying truth, that is the whole
society are lying.\\

      -- 柯文哲 Wen Jei, Ko. (2014)
#+END_QUOTE

Verse Block

Verse block is similar with quote’s, but it will keeps line break. Take a poem as example:

#+BEGIN_VERSE
眾里尋他千百度
驀然回首
那人卻在
燈火闌珊處
  -- 辛棄疾〈青玉案〉
#+END_VERSE

Image

Insert Image

#+BEGIN_CENTER
#+ATTR_HTML: :width 400px
[[file:images/sky.jpg]]
#+END_CENTER

Fill Image

Text is in white.

:PROPERTIES:
:FILL:     images/sky.jpg
:TITLE:    white
:SLIDE:    white
:END:

Miscellaneous

Table

Add a * prefix to highlight item. e.g. * Highlight Item

Title1	Title2	Title2
Item1	* Highlight Item	11
Item2	Shiroshime Kanata	* 25
Item3	Test	56

| Title1 | Title2            | Title2 |
|--------+-------------------+--------|
| Item1  | * Highlight Item  |     11 |
| Item2  | Shiroshime Kanata |   * 25 |
| Item3  | Test              |     56 |

Footnote

Use C-c C-x f to create footnotes [fn:N], which will be placed under a slide¹:

Jump between footnotes with C-c C-c on [fn:N].

 * Title
   This is content text.[fn:1]
...

 * Footnotes
 [fn:1] Footnote is in here!

↓ Look here!

Math Formula

org-ioslide uses MathJax to render math formula:

$$∫_0^∞ e-x^2 dx=\frac{\sqrt{π}}{2}$$

$$\int_0^\infty e^{-x^2} dx=\frac{\sqrt{\pi}}{2}$$

By default, MathJax is installed and enabled.

If you don’t need this, just add #+USE_MATHJAX: false in your slide file to shrink slide size.

Speaker Note

Press p to display speaker note.
Use #+ATTR_HTML: :class note before a QUOTE block, and its contents will be converted into speaker note:

#+ATTR_HTML: :class note
#+BEGIN_QUOTE
This is the note area for presenter.
- Item 1
- Item 2
A [[https://github.com/][link]] to Github!
#+END_QUOTE

This is the note area for presenter.

Item 1

Item 2

A link to Github!

Segue Page

What Segue?

Segue ([`segwe]) page is passing page.

:SLIDE: segue dark quote
:ASIDE: right bottom
:ARTICLE: flexbox vleft auto-fadein

This Is A “Segue Page” Demo

Text content of Segue page will appear here.

Segue (Hide Title)

This is what a normal QUOTE block looks like, which under a segue slide.

The second paragraph.

– Name Sign

Cheat Sheets

Available Shortcuts

Pressing h highlights code snippets
Pressing p toggles speaker notes (if they’re on the current slide)
Pressing f toggles fullscreen viewing
Pressing w toggles widescreen
Pressing o toggles overview mode
Pressing ESC toggles off these goodies

Available Properties

Available properties applied separatly on each slide pages:

:SLIDE: dark segue [thank-you-slide]
:ASIDE: [left right] [top bottom]
:ARTICLE: flexbox vleft auto-fadein [smaller/larger/large]

Available Options

Available options applied on the whole slide:

# Appear in cover-slide:
#+TITLE: Org-IO Slide Demo & Example
#+SUBTITLE: Here Is Subtitle
#+COMPANY: Company Name

# Appear in thank-you-slide:
#+GOOGLE_PLUS: https://plus.google.com/YOUR_ACCOUNT
#+WWW: http://your.blog.io/
#+GITHUB: http://github.com/YOUR_ACCOUNT
#+TWITTER: USER_NAME

# Appear under each slide:
#+FAVICON: images/emacs-icon.png
#+ICON: images/org-icon.png
#+HASHTAG: Hash tag appears in here

# Google Analytics
#+ANALYTICS: UA-42122243-1

Available Options For Packages

Use or disable JS packages.

# Highlight code blocks with Prettify.js
#+USE_PRETTIFY: true

# Display math formula with MathJax.js
# MathJax is a little fat (~5 MB), set it `false` if no need to shrink the
# size of slide file
#+USE_MATHJAX: true

# Build list animation
#+USE_BUILDS: true

Thank You Slide

Add the following properties to one headline:

:SLIDE: thank-you-slide segue
:ASIDE: right
:ARTICLE: flexbox vleft auto-fadein

Both thank-you-slide and segue are necessary!

Thank You ˊ・ω・ˋ

Footnotes

¹ Footnote is in here!

Files

index.org

Latest commit

History