Press F to enter fullscreen
xxxxxxxxxx183
1
---2
titleReveal-MD3
themesolarized # try solarized, serif or white4
---5
// global6
```html7
<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>8
```9
10
```css11
h1, h2, h3, h4, h5, h6 {12
text-transform: uppercase !important;13
}14
15
p, li {16
font-size: 2rem;17
}18
19
code {20
color: red;21
}22
23
.container {24
overflow: scroll;25
max-height: 90vh;26
}27
```28
===29
30
# [Reveal-md](https://patarapolw.github.io/reveal-md/reveal/)31
32
Reveal.js x Markdown (Showdown.js) editor, CLI and viewer.33
34
===35
36
## Features37
38
- Read Reveal Markdown (Reveal-md) online at <https://patarapolw.github.io/reveal-md/reveal/?q=\<URL>>39
- CLI script to editor and read Reveal-md totally offline (no internet connection needed)40
- Customizable via `git clone` / `git submodule add`, then edit these files41
- [/reveal/src/index.scss](/reveal/src/index.scss)42
- [/reveal/src/plugins.ts](/reveal/src/plugins.ts)43
- [/reveal/src/defaults.ts](/reveal/src/defaults.ts)44
45
--46
47
- Minimal [/dist/reveal/index.html](/dist/reveal/index.html) generated by [/reveal/](/reveal/) to host for your own.48
- Host your own version of Reveal-md on <https://zeit.co/>, <https://www.netlify.com/> or [GitHub Pages](https://pages.github.com/) for online viewing (at `/reveal/?q=<URL>`)49
50
--51
52
- Reveal-md is based on [Reveal.js](https://revealjs.com), so can navigate not only left-and-right, but also up-and-down.53
- Reveal.js options are customizable via [YAML front-matter](https://jekyllrb.com/docs/front-matter/).54
- For example, `shuffle: true` -- Try it!55
- But not only Reveal.js options, but also56
- `theme:` as can be seen in this example57
58
===59
60
## How to create Reveal-md61
62
- Global scripting `<script></script>` and styling `<style></style>` is also supported in slides marked with63
64
```markdown65
// global66
content (CSS, Pug, HTML or extended Markdown)67
```68
69
- The slides marked with `// global` or `// hidden` will be hidden.70
71
--72
73
HTML is also supported.74
75
--76
```html77
<small>Small character</small>78
```79
--80
// slide81
```html82
<small>Small character</small>83
```84
--85
86
Furthermore, you can reference other online CSS urls via87
- `// css=<URL>`88
89
===90
91
## Installation of CLI editor92
93
```94
npm i https://github.com/patarapolw/reveal-md.git95
```96
97
--98
99
Or,100
101
```102
npm i -g https://github.com/patarapolw/reveal-md.git103
```104
105
--106
107
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.)108
109
```110
git submodule add https://github.com/patarapolw/reveal-md.git111
cd reveal-md && npm i112
cd ..113
npm i ./reveal-md114
# This will create symlink, but `yarn add ./reveal-md` will copy to `node_modules`115
```116
117
===118
119
## Usage120
121
```122
reveal-md [options] <fileOrDir>123
124
Read file or directory or in reveal-md125
126
Positionals:127
fileOrDir Path to the file or directory to read128
129
Options:130
--version Show version number [boolean]131
--edit, -e Edit the file in editor [boolean]132
--help Show help [boolean]133
```134
135
===136
137
## Additional features of CLI editor138
139
- `// css=<FILE_PATH>` also works140
141
--142
143
To add external JavaScript, you will have to edit144
- [/reveal/src/index.scss](/reveal/src/index.scss)145
- [/reveal/src/plugins.ts](/reveal/src/plugins.ts)146
147
===148
149
## Save as HTML (and associated assets folder)150
151
This is best done by [downloading complete web page, in associated web browser](https://www.makeuseof.com/tag/save-complete-webpage-offline-reading/).152
153
Using web crawlers, like <https://github.com/website-scraper/node-website-scraper> won't work, because some JavaScript in Reveal.js is dynamically injected.154
155
===156
157
## Online viewer158
159
You can do it at <https://patarapolw.github.io/reveal-md/reveal/?q=\<YOUR_URL_HERE>>160
161
===162
163
## Create your own version164
165
- Clone this project166
- Build `/editor/` and/or `/reveal/`, and the following environmental variables can be set if needed.167
- `BASE_URL=` -- needed for GitHub Pages168
- `NO_EDITOR=` -- if you don't want to build the editor. Build the `/reveal/index.html` only.169
170
===171
172
## Duplicated projects173
174
- Sorry, I have created duplicates at 175
- <https://github.com/patarapolw/reveal-editor>176
- <https://github.com/patarapolw/reveal-md-server>177
178
===179
180
## Contributions181
182
- Please send suggestions at <https://github.com/patarapolw/reveal-md/issues>183