harmonide v0.3.0
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!