Harmonide

Harmonide is a HTML5 slide show framework for JS hackers that supports compiling a Markdown file to HTML slides and making all JavaScript code blocks runnable on the slides. All JavaScript codes are written in ES6 that are compiled by Babel.

Getting started

Installation & build

npm install harmonide
harmonide build your-slide.md

Watch the changes

harmonide watch your-slide.md

Markdown formats

backgroundColor: #000
 
-----
-----
 
# Slide1 title
 
- content1
- content2
 
-----
backgroundImage: test.jpg
-----
 
# Slide2 title
 
\`\`\`js
var test = 'test';
console.log(test);
\`\`\`

Defining the slides

You can put two lines of ----- in front of the slide you are going to define. For example if you want to define two slides, the markdown will be as follows.

-----
-----
# Slide1
 
-----
-----
# Slide2

Setting options

• Global options

The options set at the beginning of the file will be global options.

backgroundColor: white
 
-----
-----
# Slide1

• Slide options

The options set in between two lines of ----- will be options for the slide.

-----
backgroundColor: white
align: middle
-----
 
# Slide1

Options

title

Type: string

Title for the slide HTML. Only available in global option.

layout

Type: string

Default: default

Name of layout file in layouts directory. The file name will be layouts/layout.html.erb. Only available in global option.

backgroundColor

Type: string

Background color of the slide. Any type of color string that can be used in css can be specified.

backgroundImage

Type: string

Background image of the slide. If just a file name is specified, that will find the file in build/assets. URL can also be specified.

align

Type: string

Align in the slide. Can be middle, bottom or center

color

Type: string

Text color in the slide. Any type of color string that can be used in css can be specified.

type

Type: string

Spefies the type of the slide. Can be title.

Development

Install Grunt and modules

npm install -g grunt-cli
npm install

Create drafts directory and put markdown files

mkdir drafts
vi drafts/sample.md

Generate html from markedown

grunt parse

You can also watch the changes and parse them dynamically

grunt watch

It will generate html files in the build directory from all markedown files in the drafts directory. In this case, you will get build/sample.html. Now you can upload buid directory to your webserver!