| title | description | author | theme | transition | separators | ||||
|---|---|---|---|---|---|---|---|---|---|
Reveals - Markdown Presentation Loader |
Create instant reveal.js presentations from GitHub repositories with frontmatter support |
The Tech Collective |
lakruzz |
fade |
|
This project builds on reveal.js
The purpose it separate what from how and to go MarkDown crazy 🤪 - and allow all the nice reveal.js features to be available from simple markdown files.
🔗 If you are looking at this README.md in GitHub, try to
load it as a reveal
All you have to do is to create a reveal-flavoured markdown with your slides. Store it in a public GitHub repository, and load it with the MarkDownLoader
📁 Load from any public GitHub repository
🎨 Frontmatter configuration support
🖼️ Expands relative paths to local self-hosted resources
🎬 Theme and transition customization
💯 Everything else that reveal.js promised
- Open the free, Open Source MarkDownLoader
🔗 https://reveals.thetechcollective.dev/markdownloader - ✏️ Fill in details:
ownerGitHub username/organizationrepoRepository namefileMarkdown filename
- 🎁 There are more settings available, but they are all optional
- 🚀 Click Load
You can also load presentations directly by specifying URL parameters:
owner=USERNAME # required
repo=REPOSITORY # required
file=FILENAME # optional, may including subfolders,
# defaults to 'presentation.md'Add frontmatter to your MarkDown, to instruct the MarkDownLoader to use your preferences.
- Allows you to set the
title,descriptionandauthorof the loaded page - Allows you to preload the URL parameters, so you can distribute cleaner URL's to you audience
---
title: "My Presentation"
description: "A great presentation"
author: "Your Name"
theme: "black"
transition: "slide"
separators:
section: '\n\n---\n---\n\n'
slide: '\n\n---\n\n'
---The following frontmatter fields are supported in your markdown file for metadata
---
title: "MarkDownLoader"
description: "Your beautiful presentations ...as pure MarkDown"
author: "Lakruzz — Lars Kruse"
---The fields will be used to populate the HTML <head> section:
<head>
<title>MarkDownLoader</title>
<meta name="description" content="Your beautiful presentations ...as pure MarkDown">
<meta name="author" content="Lakruzz — Lars Kruse">
</head>The following frontmatter fields are supported in your markdown file and will impact the appearance
---
theme: "black" #default
transition: "slide" #default
---
white - black - league - sky - beige - simple - serif -blood - night - moon - solarized - lakruzz
---
theme: "black" #default
transition: "slide" #default
---
none - fade - slide - convex - concave - zoom
Separators are used to define what marks a new section (horizontal) and the individual slides (vertical).
---
separators:
section: '\n\n---\n---\n\n' # default for horizontal slides
slide: '\n\n---\n\n' # default for vertical slides
---Using two or one markdown rulers (---) respectively, has the delicious side-effect that GitHub can render your MarkDown with dividers too.
Here's an example that uses html comments as markers.
---
separators:
section: '^<!--section-->'
slide: '^<!--slide-->'
---The loader precompiles your MarkDown and substitutes path references to absolute GitHub URLs.Safely supporting paths relative to you MarkDown file or your repo root- as you would expect
— and exactly as GitHub renders your .md.
👌 You can conveniently keep your assets in you own repo and reference them as you are used to
A repo named lakruzz/presentations
presentations/
├── presentation.md # Main presentation
├── vision/
│ ├── vision.md # Vision document
│ ├── .png
│ └── chart.jpg
└── assets/
├── logo.png
└── background.pngIn the vision/vision.md file
 <!-- current directory relative to vision.md -->
 <!-- parent directory, relative to vision.md -->
 <!-- repository root -->
...becomes
<img alt="The Chart"
src="https://raw.githubusercontent.com/lakruzz/presentations/main/vision/chart.jpg">
<img alt="Logo"
src="https://raw.githubusercontent.com/lakruzz/presentations/main/assets/logo.png">
<img alt="Same logo"
src="https://raw.githubusercontent.com/lakruzz/presentations/main/assets/logo.png">- Markdown references:
[text](./path)
 - HTML [data-]src attributes:
src="./path"
data-src="./path" - HTML href attributes:
href="./path" - Reveals data-background[-video] attributes:
data-background="./path"
data-background-video="./path"
Although valid in other contexts, we do NOT substitute implied paths - path references NOT starting with / or ./ or ../
Implied references are interpreted as ...just text and they ar not substituted.
Although the two examples below are semantically the same, we only support the explicit variant
 <!-- current directory relative to vision.md -->
 <!-- implied current directory - not explicit enough -->
...becomes
<img alt="The Chart"
src="https://raw.githubusercontent.com/lakruzz/presentations/main/vision/chart.jpg">
<img alt="The Chart - again" src="chart.jpg">
⛔️ At runtime this will be interpreted as a resource inside the /markdownloader folder on the server. This won't work!
Reveal supports two directives you can pass on as html comments
- one for
slide - one for
element
(see reveal's documentation)
An html comment starting with the keyword .slide:
Anything you add after that will be added to the <section> tag in the rendered html
---
<!-- .slide: data-background="#ff0000" -->
# Slide header
Enjoy the (very) read background on this slide
---...see it live on the next slide
Enjoy the (very) read background on this slide
An html comment starting with the keyword .element:
Anything you add after that will be added to the the-most-recent-generated tag in the rendered html
Element style example 1:
---
# A list
- Item 1
- Item 2 <!-- .element: style="color: blue;" -->
- Item 3 <!-- .element: style="color: red;" -->
---🤔 Will generate a list with three items, the first has the color defined by the theme, the second is blue and the third is red item
...see it live on the next slide
- Item 1
- Item 2
- Item 3
Element style examples:
---
# A list
- Item 1 <!-- class="fragment "-->
- Item 2 <!-- .element: style="color: blue;" -->
- Item 3
<!-- .element: style="color: red;" -->
---🤔 Will generate a list with three items, the first and third are red, the second is blue. Only the first items is shown at first, the second and third appear as you advance (click ⬇️ arrow)
...see it live on the next slide
- Item 1
- Item 2
- Item 3
A new line containing only Note: will indicate the beginning of you speaker notes - until end of the slide.
---
# Notes
Hit `s` ...for _speaker notes_
Note:
This slide has speaker notes
---Note:
This slide has speaker notes