DEV Community

darkside haguremetal
darkside haguremetal

Posted on

Set-up to convert a markdown file to reveal.js slides by pandoc

#revealjs #markdown #pandoc #node

Environment

About reveal.js

reveal.js can make you a cool presenter in a so easy way.
https://revealjs.com/#/

Install reveal.js for making html presentation slides from markdown files by a single pandoc command.

ref. https://github.com/hakimel/reveal.js/#full-setup

Overview

  1. Install pandoc by homebrew
  2. Install node.js by nodebrew
  3. Clone reveal.js
  4. Check to convert a markdown file to html presentation slides

How to set up

Install pandoc by homebrew

  • install pandoc by homebrew like below. 
$ brew install pandoc
Enter fullscreen mode Exit fullscreen mode

Install node.js by nodebrew

  • Node.js is not yet installes. 
$ which node
node not found
Enter fullscreen mode Exit fullscreen mode
  • Install nodebrew by homebrew. 
$ brew install nodebrew
==> Downloading https://github.com/hokaccha/nodebrew/archive/v1.0.1.tar.gz
==> Downloading from https://codeload.github.com/hokaccha/nodebrew/tar.gz/v1.0.1
######################################################################## 100.0%
==> Caveats
You need to manually run setup_dirs to create directories required by nodebrew:
  /usr/local/opt/nodebrew/bin/nodebrew setup_dirs

Add path:
  export PATH=$HOME/.nodebrew/current/bin:$PATH

To use Homebrew's directories rather than ~/.nodebrew add to your profile:
  export NODEBREW_ROOT=/usr/local/var/nodebrew

Bash completion has been installed to:
  /usr/local/etc/bash_completion.d

zsh completions have been installed to:
  /usr/local/share/zsh/site-functions
==> Summary
🍺   /usr/local/Cellar/nodebrew/1.0.1: 8 files, 38.6KB, built in 10 seconds
Enter fullscreen mode Exit fullscreen mode
  • Check installation of nodebrew. 
$ nodebrew -v
nodebrew 1.0.1

Usage:
    nodebrew help                         Show this message
    nodebrew install <version>            Download and install <version> (from binary)
    nodebrew compile <version>            Download and install <version> (from source)
    nodebrew install-binary <version>     Alias of `install` (For backword compatibility)
    nodebrew uninstall <version>          Uninstall <version>
    nodebrew use <version>                Use <version>
    nodebrew list                         List installed versions
    nodebrew ls                           Alias for `list`
    nodebrew ls-remote                    List remote versions
    nodebrew ls-all                       List remote and installed versions
    nodebrew alias <key> <value>          Set alias
    nodebrew unalias <key>                Remove alias
    nodebrew clean <version> | all        Remove source file
    nodebrew selfupdate                   Update nodebrew
    nodebrew migrate-package <version>    Install global NPM packages contained in <version> to current version
    nodebrew exec <version> -- <command>  Execute <command> using specified <version>

Example:
    # install
    nodebrew install v8.9.4

    # use a specific version number
    nodebrew use v8.9.4
Enter fullscreen mode Exit fullscreen mode
  • Add path of nodebrew. 
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile
Enter fullscreen mode Exit fullscreen mode
  • Read profile(, or restart shell). 
$ source ~/.zprofile
Enter fullscreen mode Exit fullscreen mode
  • Check available node.js versions. 
$ nodebrew ls-remote
v0.0.1    v0.0.2    v0.0.3    v0.0.4    v0.0.5    v0.0.6

v0.1.0    v0.1.1    v0.1.2    v0.1.3    v0.1.4    v0.1.5    v0.1.6    v0.1.7
v0.1.8    v0.1.9    v0.1.10   v0.1.11   v0.1.12   v0.1.13   v0.1.14   v0.1.15
v0.1.16   v0.1.17   v0.1.18   v0.1.19   v0.1.20   v0.1.21   v0.1.22   v0.1.23
v0.1.24   v0.1.25   v0.1.26   v0.1.27   v0.1.28   v0.1.29   v0.1.30   v0.1.31
v0.1.32   v0.1.33   v0.1.90   v0.1.91   v0.1.92   v0.1.93   v0.1.94   v0.1.95
v0.1.96   v0.1.97   v0.1.98   v0.1.99   v0.1.100  v0.1.101  v0.1.102  v0.1.103
v0.1.104
...
v11.0.0   v11.1.0   v11.2.0   v11.3.0   v11.4.0   v11.5.0   v11.6.0   v11.7.0
v11.8.0   v11.9.0

io@v1.0.0 io@v1.0.1 io@v1.0.2 io@v1.0.3 io@v1.0.4 io@v1.1.0 io@v1.2.0 io@v1.3.0
io@v1.4.1 io@v1.4.2 io@v1.4.3 io@v1.5.0 io@v1.5.1 io@v1.6.0 io@v1.6.1 io@v1.6.2
io@v1.6.3 io@v1.6.4 io@v1.7.1 io@v1.8.1 io@v1.8.2 io@v1.8.3 io@v1.8.4

io@v2.0.0 io@v2.0.1 io@v2.0.2 io@v2.1.0 io@v2.2.0 io@v2.2.1 io@v2.3.0 io@v2.3.1
io@v2.3.2 io@v2.3.3 io@v2.3.4 io@v2.4.0 io@v2.5.0

io@v3.0.0 io@v3.1.0 io@v3.2.0 io@v3.3.0 io@v3.3.1
Enter fullscreen mode Exit fullscreen mode
  • Install node.js of stable(latest) version. But, ... 
$ nodebrew install-binary stable
$ # nodebrew install-binary latest
Fetching: https://nodejs.org/dist/v10.15.1/node-v10.15.1-darwin-x64.tar.gz
Warning: Failed to create the file
Warning: /Users/xxxxxxxx/.nodebrew/src/v10.15.1/node-v10.15.1-darwin-x64.tar.gz:
Warning: No such file or directory
                                                                           0.0%
curl: (23) Failed writing body (0 != 1056)
download failed: https://nodejs.org/dist/v10.15.1/node-v10.15.1-darwin-x64.tar.gz
Enter fullscreen mode Exit fullscreen mode
  • Have to set up nodebrew before installation like below. 
$ nodebrew setup
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew

========================================
Export a path to nodebrew:

export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================
Enter fullscreen mode Exit fullscreen mode
  • After set up nodebrew, install node.js. 
$ nodebrew install-binary stable
$ # nodebrew install-binary latest
Fetching: https://nodejs.org/dist/v10.15.1/node-v10.15.1-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully
Enter fullscreen mode Exit fullscreen mode
  • Check node.js was installed by nodebrew. 
$ nodebrew ls
v10.15.1

current: none
$ which node
node not found
$ node -v
zsh: command not found: node
Enter fullscreen mode Exit fullscreen mode
  • Make node.js valid. 
$ nodebrew use v10.15.1
use v10.15.1
Enter fullscreen mode Exit fullscreen mode
  • Check node.js validation. 
$ node -v
v10.15.1
$ npm -v
6.4.1
$ which node
/Users/xxxxxxxx/.nodebrew/current/bin/node
Enter fullscreen mode Exit fullscreen mode

Clone reveal.js

  • Clone reveal.js(, or download it). 
$ cd your/work/directory
$ git clone https://github.com/hakimel/reveal.js.git
Cloning into 'reveal.js'...
remote: Enumerating objects: 11068, done.
remote: Total 11068 (delta 0), reused 0 (delta 0), pack-reused 11068
Receiving objects: 100% (11068/11068), 8.57 MiB | 82.00 KiB/s, done.
Resolving deltas: 100% (6115/6115), done.
Enter fullscreen mode Exit fullscreen mode 
$ tree # at your/work/directory
.
├── reveal.js
│   ├── ...
...
Enter fullscreen mode Exit fullscreen mode

Check to convert a markdown file to html presentation slides

  • Create a markdown file in your/work/directory. 
% Title
% Name
% yyyy/mm/dd

# Header1

---

### Header3

- foo
- bar
- foobar

---

### header

1. foo
1. bar
1. baz

# HEADER

---

_foo_

__bar__

___baz___

[foobar_link](https://github.com/hakimel/reveal.js/#full-setup)

> foo bar  
> baz
Enter fullscreen mode Exit fullscreen mode 
$ tree # at your/work/directory
.
├── input.md
└── reveal.js
    ├── ...
...
Enter fullscreen mode Exit fullscreen mode
  • Create html slides of reveal.js by pandoc 
$ pandoc -s -t revealjs -o output.html input.md
$ tree
.
├── input.md
├── output.html
└── reveal.js
    ├── ...
...

$ open output.html
Enter fullscreen mode Exit fullscreen mode

  • Make alias for your favorite theme as you like. 
$ alias revealjs='pandoc -s -t revealjs --variable transition=linear -V theme=blood -o '
$ revealjs output.html input.md
$ open output.html
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

auguste profile image

React x ChakraUI: How to Craft Stylish PDFs

Auguste -

snyk_sec profile image

Building an npm package compatible with ESM and CJS in 2024

SnykSec -

melonlovershake profile image

Can someone help me with the coding here?

MelonLoverShake -

myogeshchavan97 profile image

Build & Deploy Full Stack Link Sharing App Using MERN Stack

Yogesh Chavan -