GitHub - hiroppy/fusuma: ✍️Make slides with Markdown easily.
source link: https://github.com/hiroppy/fusuma
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
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
- introduction slide of Fusuma [repository]
- others [repository]
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
- open Sidebar(click the bottom right button(三))
- click the PC monitor icon
- if you use Chrome, you can choose select cast device
- 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');
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK