Yet Another Org-mode Presentation Script

To Start Press "n"

WARN Turn off your custom keyboard shortcuts

Made by guicho2.71828 (Masataro Asai)

1 What Is It?

An Alternative to

Org-based Presentation


Proceed with "n"

2 Usage (on browsers)

n, <Space>, <Right arrow key>, mouse click, mouse wheel down, touch
go to the next slide/expand a list
p, <Left arrow key>, mouse wheel up
back to the previous slide
u, <Up arrow key>, ^
go to the parent section
N, <Down arrow key>
expand all list in the current slide
s, or typing "go"
jump to an arbitrary section (using minibuffer)
debugging mode (shows content border)
<Ctrl-g> or <Esc>
cancel current key strokes
typing "help"
show available commands in the minibuffer!

3 Usage (on emacs)

  1. clone our repo
  2. make html to publish
  3. show it on your browser!

4 Virtue

  • Simplicity
    • code.js is a pure javascript, only has 200 lines (increasing as new features are added)
  • Extensibility
    • you can write your own extension and its easy
    • set a function to keyManager.<your-key-strokes>
    • the key strokes should contain character $c$within char code $32 < c < 126$
      • Space,!,",...A,B,C,...x,y,z,{,|,~
    • GPLv3 ?? < not attatched a license yet

5 Example: Expanding a List

  • the dots tell "this is a content"
  • list
  • list

6 Dependencies

  • jQuery (included)
  • Inkscape (image conversion)
  • org-mode (included)
  • MathJax (optional submodule)

7 LaTeX output

  • PDF Presentaiton presen.pdf – presentation in pdf with similar appearance. Useful when browser-based presentation is not allowed
  • Printable Resume resume.pdf – short and printed version.
  • make pdf and make resume on the shell
  • need the latest $\mbox{\TeX}$live installation
    • see Makefile
    • platex and dvipdfmx
    • alternatively, pdflatex

8 Code block / highlightation

(defun factorial (n)
  (if (zerop n)
      (* n (factorial (1- n)))))
import numpy as np
def unit(i):
    x = np.zeros([i,i])
    for i in range(i):
        x[i][i] = 1
    return x

9 Images

  • Put images into img/ directory.
  • svg files are converted into png.
    • We recommend it because
      1. In html presentation, the inserted svg images capture the keyboard and mouse event and the presentation sometimes does not work right.
      2. In resume output and pdf presentation, the svg and svg-inkscape package is a bit buggy and I personally failed make it work.
  • svg-png conversion is done by inkscape
    • but you can also use ImageMagick convert command.
    • See img/Makefile for more information.

10 Org-block templates

We mark the html tag with org-mode blocks such as #+BEGIN_EXAMPLE. Using block template (by modifying org-structure-template-alist), you can quickly write such blocks i.e.:

at the beginning of line, hit


in normal org-mode destribution in emacs,
it would expand into:



10.1 customizing templates

We provide custom org-structure-template-alist. These blocks are recognized by the stylesheet we provide, so they are highlighted correctly.

  • <S – smaller
  • <lar – larger
  • <t – twocolumn
  • <n – footnote
  • <r – float right
  • <ar – align right
  • <lcr – "left,center,right" format with x-large fonts
  • <E – latex `equation' environment
  • still more…

copy-paste it to your .emacs

11 Utility

  • ./ [args]
    • Watches the changes in the directory and make
    • Build statuses are notified in inotify pop-up
    • all arguments are passed to make
    • dependency : inotifywait, notify-send

12 Makefile Targets

  • make html – builds the html version
  • make resume – builds the resume version
  • make pdf – builds the pdf version
  • make – build all

13 Test

  • Link
  • This
  • Is
  • A Test

Mathjax formula:

\[ E=mc^2 \]

\begin{equation} E=mc^2 + \frac{1}{2} mv^2 \end{equation}

13.1 Twocolumn Test

  • HOOA!
  • HOOA!
  • HOOA!



13.2 many columns test

a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a

b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b

c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c

d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d

14 A Slide with Too Little Contents

Hi, I'm small!

See the headline is correctly adjusted

15 Left-Center-Right template

x-large left



This is a footnote

16 s

  • Features
    • Table of contents
    • <dl> does not expand DONE
    • Showing current keystrokes DONE
    • auto-scroll/auto-zoom with big contents
    • Showing current/total page number
    • Changing Stylesheet DONE. "style"
    • Up-Section command DONE. "u"
    • Slide thumbnail
    • stopwatch/countdown timer DONE. "timer"
    • link to #section DONE.

      sample link
  • Features inspired by other tools
    • Content Search (in org-infojs)
    • Drawing mode (in jessyink)
    • 'Paused' mode (in reveal.js)
    • Export to PDF (also in reveal.js) DONE
    • resume output DONE
    • Slide with an image covering the entire background (slideshare)
    • present one paragraph/word/letter at a time
      • those in s5
    • "C-M-x" style notation in the command definition

Author: Masataro Asai

Created: 2020-01-26 日 23:52