readme-reveal.md

title	theme
Reveal-MD	solarized

// global

<a href="https://github.com/patarapolw/reveal-md" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#64CEAA; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase !important;
}

p, li {
  font-size: 2rem;
}

code {
  color: red;
}

.container {
  overflow: scroll;
  max-height: 90vh;
}

===

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