https://github.com/hiroppy/fusuma Skip to content Sign up * Why GitHub? Features - + Mobile - + Actions - + Codespaces - + Packages - + Security - + Code review - + Project management - + Integrations - + GitHub Sponsors - + Customer stories - + Security - * Team * Enterprise * Explore + Explore GitHub - Learn & contribute + Topics - + Collections - + Trending - + Learning Lab - + Open source guides - Connect with others + The ReadME Project - + Events - + Community forum - + GitHub Education - + GitHub Stars program - * Marketplace * Pricing Plans - + Compare plans - + Contact Sales - + Nonprofit - + Education - [ ] [search-key] * # In this repository All GitHub | Jump to | * No suggested jump to results * # In this repository All GitHub | Jump to | * # In this user All GitHub | Jump to | * # In this repository All GitHub | Jump to | Sign in Sign up {{ message }} hiroppy / fusuma * Sponsor Sponsor hiroppy/fusuma * Watch 40 * Star 4.2k * Fork 182 [?]Fusuma makes slides with Markdown easily. hiroppy.github.io/fusuma 4.2k stars 182 forks Star Watch * Code * Issues 5 * Pull requests 3 * Actions * Security * Insights More * Code * Issues * Pull requests * Actions * Security * Insights master 6 branches 113 tags Go to file Code Clone HTTPS GitHub CLI [https://github.com/h] Use Git or checkout with SVN using the web URL. [gh repo clone hiropp] Work fast with our official CLI. Learn more. * Open with GitHub Desktop * Download ZIP Launching GitHub Desktop If nothing happens, download GitHub Desktop and try again. Go back Launching GitHub Desktop If nothing happens, download GitHub Desktop and try again. Go back Launching Xcode If nothing happens, download Xcode and try again. Go back Launching Visual Studio If nothing happens, download the GitHub extension for Visual Studio and try again. Go back Latest commit @renovate-bot @renovate renovate-bot and renovate chore(deps): update dependency webpack to ^ 5.20.2 ... 5739a01 Feb 4, 2021 chore(deps): update dependency webpack to ^5.20.2 5739a01 Git stats * 787 commits Files Permalink Failed to load latest commit information. Type Name Latest commit message Commit time .github ci: add pdf task Feb 3, 2021 packages chore(deps): update dependency webpack to ^5.20.2 Feb 4, 2021 samples feat(fusuma): add a11y Feb 3, 2021 scripts chore(script): update deploy-site script Jan 31, 2021 site chore(site): update Feb 2, 2021 .editorconfig feat: add core codes Apr 26, 2018 .eslintignore chore: introduce eslint Jan 21, 2021 .eslintrc.js style: fix by eslint Jan 21, 2021 .gitattributes chore(git): add .gitattributes May 11, 2019 .gitignore chore: introduce eslint Jan 21, 2021 .gitpod.yml chore(gitpod): update Jun 19, 2019 .huskyrc.js chore: clean up infra Jan 21, 2021 .prettierignore feat(cli): add chalk Jan 20, 2021 .prettierrc.js chore: clean up infra Jan 21, 2021 .versionrc chore(deps): add standard-version Jun 16, 2019 CHANGELOG.md v2.0.0 Feb 3, 2021 README.md chore(readme): update Feb 3, 2021 jest.config.js chore: clean up infra Jan 21, 2021 lerna.json v2.0.0 Feb 3, 2021 lint-staged.config.js chore: introduce eslint Jan 21, 2021 package-lock.json chore(deps): update dependency webpack to ^5.20.2 Feb 4, 2021 package.json chore(deps): update npm to >=7.5.2 Feb 4, 2021 renovate.json refactor: remove some packages and refactor fusuma Jan 7, 2021 View code README.md [logo] A tool to create slides easily for you [?] npm Azure Codecov Features * Zero Config * Providing various modes * Markdown and MDX * Themes * Code syntax Highlight, MathJax, Diagrams, and Flowcharts * Full supporting for SEO and OGP * Checking a11y automatically * Customizable JavaScript and CSS * A sidebar having agenda and some features Modes * Development Mode + Running with HMR + Just coding Markdown and sometimes CSS * Build Mode + Rendering to html and optimizing js,css,md + Generating an image of slides as og:image and checking a11y automatically * Presentation Mode + Speaker Note + Timer + Recording your page actions and voice + Using a Fluorescent Marker on the slides * Deploy Mode + Deploying to GitHub Pages * PDF Mode + Exporting slides as PDF * Live Mode + Available to make a speech while streaming a comment on Twitter Demos * Introducing Fusuma [repository] * hiroppy/slides Open in Gitpod Getting Started $ npm i fusuma -D $ npx fusuma init $ tree -a . +-- .fusumarc.yml +-- slides | +-- 0-title.md +-- style.css # --- executable tasks--- $ npx fusuma init # create scaffold $ npx fusuma start # run server for development $ npx fusuma start-prod # run server for bundle directory $ npx fusuma build # build slides for production $ npx fusuma deploy # deploy to github pages $ npx fusuma pdf # export as PDF $ npx fusuma live # start live mode When npx fusuma start is executed, fusuma will create slides like follows on http://localhost:8080. In addition, Fusuma adds a sidebar and when you set section titles, fusuma shows them on the sidebar. slides generated by init sidebar [procedure-] [sidebar] the demo Themes Fusuma offers the following themes also users can customize them because this is just CSS. default pop [default] [pop] webpack babel node [webpack] [babel] [node] the demo Markdown and MDX ## Hello This is the first slide. --- ## import { Sample } from './scripts/Sample'; This is the second slide. // Sample.js export const Sample = () =>

Hello from jsx!!

; Getting Started/Creating Your Slide Customize styles The following properties are provided, but you can change the css directly if you want. :root { --base-font-family: 'Roboto', 'San Francisco', helvetica, arial, sans-serif; --base-font-size: 2.4rem; --base-font-weight: 300; --base-align: center; --base-max-width: 1280px; --base-outer-margin: 24px; --base-image-height: auto; --base-image-width: 100%; --base-image-border: none; --base-image-border-radius: 0; --color-title: #464646; --color-base: #545454; --color-background: #f5f5f5; --color-link: #3498db; --h1-font-size: 5.6rem; --h1-font-weight: 300; --h2-font-size: 4rem; --h2-font-weight: 300; --h3-font-size: 3.6rem; --h3-font-weight: 300; --h4-font-size: 3rem; --h4-font-weight: 300; --h5-font-size: 2.4rem; --h5-font-weight: 600; --h6-font-size: 2rem; --h6-font-weight: 600; --code-font-size: 1.8rem; --qr-code-image-size: 320px; } Presenter Mode This feature uses experimental APIs so please use Chrome or Firefox. * Presentation API (Chrome, Firefox) * Screen Capture API (Chrome, Firefox) You can see your Note for each slide and the next slide on the Host screen. [presenter-host] Modes/Presenter Features * Showing your slide notes * Setting a timer * Recording your actions and voice, and do time-travel + video: Recording Your Voice * (experimental) Drawing lines on the slide during making a speech recording Your Actions drawing Lines [presenter-] [drawing] Live Mode Fusuma can fetch tweets from Twitter. In addition, fusuma have an api endpoint. If you specify a keyword and authentication keys, fetching from twitter will be enabled. Since comments can be sent to fusuma itself, you can use in the private case. Also, this mode can run with Presenter Mode. [live-mode-comments] Modes/Live --------------------------------------------------------------------- Special Thanks to Themes I respect your UI and I really love it. I usually talk about you in Japan so I added your colors to Fusuma. If you have issues, feel free to mention me! Thank you. * Node.js * webpack * Babel About [?]Fusuma makes slides with Markdown easily. hiroppy.github.io/fusuma Topics react markdown keynote presentation seo slides a11y mdx Resources Readme Releases 113 v2.0.0 Latest Feb 3, 2021 + 112 releases Sponsor this project Sponsor Learn more about GitHub Sponsors Packages 0 No packages published Used by 123 * @hiroppy * @arayaryoma * @yonezo * @arayaryoma * @arayaryoma * @arayaryoma * @ymkz * @anoriqq + 115 Contributors 17 * @hiroppy * @renovate-bot * @karszawa * @arayaryoma * @Quramy * @CraigHarley * @hiloki * @fengzilong * @jankeromnes * @MaxMEllon + 6 contributors Languages * JavaScript 98.6% * HTML 1.3% * Dockerfile 0.1% * (c) 2021 GitHub, Inc. * Terms * Privacy * Security * Status * Docs * Contact GitHub * Pricing * API * Training * Blog * About You can't perform that action at this time. You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.