Skip to content

Instantly share code, notes, and snippets.

@vielhuber

vielhuber/..MD

Last active May 25, 2025 17:16
Show Gist options
  • Save vielhuber/b599f610434ec60e485c38896fc84b63 to your computer and use it in GitHub Desktop.
Save vielhuber/b599f610434ec60e485c38896fc84b63 to your computer and use it in GitHub Desktop.
Download ZIP
reveal.js markdown presentation #js
Raw
..MD

init

  • mkdir test
  • cd test
  • git clone [email protected]:vielhuber/test.git . # clone empty repository
  • create .gitignore, README.MD, index.html, index.md
  • follow README.MD

start

  • cd test
  • cd reveal.js
  • npm start
  • npm start -- --host=0.0.0.0 --port=8080 # serve so that you can access it on other pcs (with http://192.168.0.2:8080)

export as pdf

export as (single) html

  • npm install -g html-inline
  • cd reveal.js
  • cp ./../index.html ./tmp1.html
awk 'BEGIN{RS="</section>"; ORS=""} \
/<section[^>]*data-markdown="[^"]+"/ { \
    match($0, /data-markdown="([^"]+)"/, m); \
    f=m[1]; \
    gsub(/data-markdown="[^"]+"/,"data-markdown"); \
    print $0; \
    print "    <script type=\"text/template\">\n"; \
    while((getline l < f)>0) print "        " l "\n"; \
    close(f); \
    print "    </script>\n</section>\n"; \
    next \
} \
{ print $0 "</section>\n" }' tmp1.html > tmp2.html
  • html-inline -i ./tmp2.html -o ./../presentation.html
  • rm ./tmp1.html ./tmp2.html
Raw
README.MD
  • git clone https://github.com/hakimel/reveal.js.git
  • cd reveal.js
  • rm -rf ./.git
  • ln -s ./../index.md ./index.md
  • ln -s ./../index.html ./index.html
  • npm install
  • npm start
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Test presentation</title>
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/blood.css">
<link rel="stylesheet" href="plugin/highlight/monokai.css">
<style>
:root {
--r-main-font-size: 24px; /* default: 40px */
}
</style>
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-transition="concave" data-markdown="../index.md"></section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script>
Reveal.initialize({
hash: true,
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
});
</script>
</body>
</html>
Raw
index.md 
## 🚀Test presentation🚀

By David Vielhuber

---

### 🛠️Heading #1🛠️

Paragraph

- foo
- bar
  - foo
  - bar
- baz

---

### 💻Heading #2💻

```html [3-5|8-10|13-15]
<table>
  <tr>
    <td>Apples</td>
    <td>$1</td>
    <td>7</td>
  </tr>
  <tr>
    <td>Oranges</td>
    <td>$2</td>
    <td>18</td>
  </tr>
  <tr>
    <td>Kiwi</td>
    <td>$3</td>
    <td>1</td>
  </tr>
</table>
```

---

### 🎨Heading #3🎨

<div style="font-size:0.5em;">

- List
- with
- decreased
- font
- size

</div>

---

<div class="r-fit-text">

🙏 **Danke** 🙏

</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment