Reveal-md

Reveal.js x Markdown (Showdown.js) editor, CLI and viewer.

Features

• Read Reveal Markdown (Reveal-md) online at https://patarapolw.github.io/reveal-md/reveal/?q=<URL>

• CLI script to editor and read Reveal-md totally offline (no internet connection needed)

• Customizable via git clone / git submodule add, then edit these files

  • /reveal/src/index.scss
  • /reveal/src/plugins.ts
  • /reveal/src/defaults.ts

• Minimal /dist/reveal/index.html generated by /reveal/ to host for your own.

• Host your own version of Reveal-md on https://zeit.co/, https://www.netlify.com/ or GitHub Pages for online viewing (at /reveal/?q=<URL>)

• Reveal-md is based on Reveal.js, so can navigate not only left-and-right, but also up-and-down.

• Reveal.js options are customizable via YAML front-matter.

  • For example, shuffle: true -- Try it!

• But not only Reveal.js options, but also

  • theme: as can be seen in this example

How to create Reveal-md

• Global scripting <script></script> and styling <style></style> is also supported in slides marked with

// global
content (CSS, Pug, HTML or extended Markdown)

• The slides marked with // global or // hidden will be hidden.

HTML is also supported.

<small>Small character</small>

// slide

<small>Small character</small>

Furthermore, you can reference other online CSS urls via

• // css=<URL>

Installation of CLI editor

npm i https://github.com/patarapolw/reveal-md.git

Or,

npm i -g https://github.com/patarapolw/reveal-md.git

It might possible to use Yarn as well, but NPM is confirmed to work, especially for npm i ./reveal-md (which will create symlink instead of copy files.)

git submodule add https://github.com/patarapolw/reveal-md.git
cd reveal-md && npm i
cd ..
npm i ./reveal-md
# This will create symlink, but `yarn add ./reveal-md` will copy to `node_modules`

Usage

reveal-md [options] <fileOrDir>

Read file or directory or in reveal-md

Positionals:
  fileOrDir  Path to the file or directory to read

Options:
  --version   Show version number                                      [boolean]
  --edit, -e  Edit the file in editor                                  [boolean]
  --help      Show help                                                [boolean]

Additional features of CLI editor

• // css=<FILE_PATH> also works

To add external JavaScript, you will have to edit

• /reveal/src/index.scss
• /reveal/src/plugins.ts

Save as HTML (and associated assets folder)

This is best done by downloading complete web page, in associated web browser.

Using web crawlers, like https://github.com/website-scraper/node-website-scraper won't work, because some JavaScript in Reveal.js is dynamically injected.

Online viewer

You can do it at https://patarapolw.github.io/reveal-md/reveal/?q=<YOUR_URL_HERE>

Create your own version

• Clone this project
• Build /editor/ and/or /reveal/, and the following environmental variables can be set if needed.
  • BASE_URL= -- needed for GitHub Pages
  • NO_EDITOR= -- if you don't want to build the editor. Build the /reveal/index.html only.

Duplicated projects

• Sorry, I have created duplicates at
  • https://github.com/patarapolw/reveal-editor
  • https://github.com/patarapolw/reveal-md-server

Contributions

• Please send suggestions at https://github.com/patarapolw/reveal-md/issues