Skip to content
✍️Make slides with Markdown easily.
CSS JavaScript HTML
Branch: master
Clone or download
Pull request Compare This branch is 253 commits behind hiroppy:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__/src
bin
media
samples/intro
scripts
src
.appveyor.yml
.editorconfig
.gitignore
.npmignore
.prettierrc.yml
.travis.yml
README.md
package-lock.json
package.json
renovate.json

README.md

📝 Make slides with MarkDown easily.

npm Travis AppVeyor Codecov

Just write MarkDown and create cool slides.😎

Features

  • supports WebSlides
  • supports Presentation API
    • also, it works even without Presentation API
  • supports various modes
    • development
    • production build
    • exporting as PDF
    • deploying to GitHub Pages
  • supports SNS, OGP, FullScreen, and etc...
  • supports Presenter Mode
    • you can give a speech while watching a presenter's notes and a timer
  • customizes JavaScript and CSS freely

Demos

Install

Node versions > v8

$ npm i fusuma --save-dev # or npm i fusuma -g

# if you want to use yarn
$ yarn add fusuma --dev

Procedure

Just execute the following three lines for executing, generating and deploying slides!

$ npm i fusuma -D
$ npx fusuma init
$ mkdir slides && echo '# Hello😄' > slides/title.md

# --- Tree ---
$ tree -a
.
├── .fusumarc.yml
└── slides
    └── title.md

1 directory, 2 files

# --- executable tasks---
$ npx fusuma start    # development
$ npx fusuma build    # build as NODE_ENV=production
$ npx fusuma deploy   # deploy to github pages
$ npx fusuma pdf      # export as PDF from HTML

When npx fusuma start is executed, fusuma will create a slide as follows and serves localhost:8080.

And you can customize the slide using CSS.

Directory Structure

Please see samples/intro or Verification Repository.

Slide order is numeric, alphabetical.

.
├── .fusumarc.yml       <-- the configuration file
├── index.js            <-- optional for rewriting
├── slides              <-- slides written by MarkDown or HTML
│   ├── 0-title.md
│   ├── 01-content.md
│   ├── 02-body
│   │   └── 0-title.md
│   └── 03-end.md
└── style.css           <-- optional for rewriting

2 directories, 7 files

Or slides can be divided by --- like below.

## Hello

This is the first slide.

---

## 🤭

This is the second slide.

Usage

Fusuma provides CLI.

   fusuma.js 0.10.2 - CLI for easily make slides with markdown

   USAGE

     fusuma.js <command> [options]

   COMMANDS

     init                Create a configure file
     start               Start with webpack-dev-server
     build               Build with webpack
     deploy              Deploy to GitHub pages
     pdf                 Export as PDF
     help <command>      Display help for a specific command

   GLOBAL OPTIONS

     -h, --help         Display help
     -V, --version      Display version
     --no-color         Disable colors
     --quiet            Quiet mode - only displays warn and error messages
     -v, --verbose      Verbose mode - will also output debug messages

Configuration File

Supports for yaml and js and it can be generated by running fusuma init.

.fusumarc.yml

meta:
  url: https://slides.hiroppy.me
  name: the present and future of JavaScript
  author: Yuta Hiroto
  description: Explain how specifications are determined and how it will be in the future.
  thumbnail: https://avatars1.githubusercontent.com/u/1725583?v=4&s=200
  siteName: slides.hiroppy.me
  repositoryUrl: https://github.com/hiroppy/fusuma
  sns:
    - twitter
    - hatena
slide:
  loop: true
  sidebar: true
  targetBlank: true
  showIndex: false
  isVertical: false
extends:
  js: index.js
  css: style.css

.fusumarc.js

module.exports = {
  meta: {
    url: 'https://slide.hiroppy.me',
    name: 'test-test',
    author: 'hiroppy',
    description: 'test',
    thumbnail: 'url',
    siteName: 'siteName',
    sns: ['twitter', 'hatena'],
    repositoryUrl: 'https://github.com/hiroppy/fusuma'
  },
  slide: {
    loop: true,
    sidebar: true,
    targetBlank: true,
    showIndex: false,
    isVertical: false
  },
  extends: {
    js: 'index.js',
    css: 'style.css'
  }
};

Slide Syntax

See the example slide:) Syntax Provided by Fusuma

Presenter Mode

  1. open Sidebar(click the bottom right button(三))
  2. click the PC monitor icon
  3. if you use Chrome, you can choose select cast device
  4. if you use a browser that does not support Presentation API, a new window will be created

API

const { start, build, deploy, pdf } = require('fusuma');
You can’t perform that action at this time.