Interactive Keynote

• Interactive keynote generator with python support
• Write your keynote in MD format build it
• Currently supports HCIL theme

Environment

Installation

git clone https://github.com/SNU-HCIL/interactive-keynote.git

cd interactive-keynote/template
npm i
npm run dev

Your markdown file myPresentation.md should be located in public/md, and generated presentation can be accessed at http://localhost:5000/myPresentation.

Build

npm run build

Manual

Currently follows the functionalities provided by grab/remark wiki. This document only explains basic features, which can be used without shortage while making your presentation.

Slide separators

A line containing three dashes represents a slide separator. To make incremental slides, where succeeding slides inherits elements from the previous one, use two dashes.

<!-- Slide separator -->
# Slide one
blablabla
---
# Slide two
blablabla

<!-- Incremental Slide separator -->
# Silde Title 
- content 1
--
- content 2
--
- content 3

Layout

Sometimes you may want to use default template for repeating contents. By setting layout: true, you can make it. When set to false, reverts to using no default template.

layout: true

#### Template subtitle

---
# Slide 1
---
# Slide 2 

<!-- both Slide 1 & 2 will contain "Template subtitle" -->

To designate specific slides as a template, simply use the template identifier.

name: template-slide

Some content.

---
template: template-slide

Content appended to template-slide's content.

Title / Subtitle

Three sizes of titles are available, and subtitles can be used using ####.

# Your Title (Big)
# Your Title (Medium)
# Your Title (Small)    
#### Your Subtitle   

Built-in Classes

Built-in slide classes include left, center, right (horizontal alignment), top, middle and bottom (vertical alignment), which may be used to align entire slides.

class: left, middle
# Left / Middle Aligned Title
---
class: center, middle
# Center / Middle Aligned Title

Inserting Image

Able to use markdown image inserting syntax:

![IMAGE](./path/to/your/image.png)

But recommend using <img/> tag. Set the size of the image using the width=n% or width=n px attribute syntax

<img src="./path/to/your/image.png" width="50%" />

Inserting YouTube Video

Embed YouTube video using <iframe/> tag.

class: middle, center

### Video example from YouTube
<iframe width="560" height="315" src="https://www.youtube.com/embed/5eLcHJLDlI8" frameborder="0" allow="encrypted-media" allowfullscreen></iframe>

Run / Visualize Python Code

Just insert python code as usual... the program will automatically generate run / visualize functionalities.

#### Python Code

```python
def add(a,b)
  a + b
end
```

Multi-column Layout

Supports multi-column layout:

.row[
.col-6[

left-column content

]
.col-6[

right-column content

]
]

In each row, the sum of column # should be 12. For example, you can make three columns with 2:1:1 ratio as follows:

.row[
.col-6[
first-column content
]
.col-3[
second-column content
]
.col-3[
third-column content
]
]

Write code without Indentation!! Otherwise, markdown parser cannot parse your code

Export PDF

A (very crude) way of printing the slides is:

1. Open in Firefox/Chrome
2. Resize the window to make the slides fill the full width of the window. (This means that there is at least a little bit of space at the top and bottom of the slides.)
3. Print to file (tip: choose a custom paper size with a 4:3 ratio)

---

Exproting Markdown to Notebook (.ipynb)

Run python script:

python3 md2ipynb.py -i input_path.md -o output_path.ipynb

-i and -o argument is used to designate the path of input / output file, respectively. If output path is not determined, input.md will be converted into output_input.ipynb.

Error report for md2ipynb: Contact [hj@hcil.snu.ac.kr]

---

Special Thanks to sveltejs/svelte, grab/remark