Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tillahoffmann/slides

Create stunning presentations using markdown powered by reveal.js.
https://github.com/tillahoffmann/slides

markdown reveal-js

Last synced: 27 days ago
JSON representation

Create stunning presentations using markdown powered by reveal.js.

Awesome Lists containing this project

README

        

---
css: static/css/harvard.css
title: Markdown Slides Demo
---

# 📽️ slides

Create stunning presentations using [markdown](https://www.markdownguide.org) powered by [reveal.js](https://revealjs.com).

[![Markdown Slides](https://github.com/tillahoffmann/slides/actions/workflows/main.yaml/badge.svg)](https://github.com/tillahoffmann/slides/actions/workflows/main.yaml)
[![PyPI](https://img.shields.io/pypi/v/markdown-slides)](https://pypi.org/project/markdown-slides/)

---

This README is a slide deck. Run `pip install markdown-slides` from the command line to install the package. Then run `slides --demo` to launch a presentation server and view the deck.

---

![](figure.png)

Here is a simple figure floated to the right.

Note:

Speaker notes start with `Note:` on each slide and can be accessed by hitting the `S` code. They support `$m\times a^{th}$`.

---

You can also [include equations](https://revealjs.com/math/#markdown) wrapped in backticks.

`\[\begin{aligned}
F(x)&=\int dx\, \cos(x)\\
&=\sin(x) + C.
\end{aligned}\]`

---

Create columns using a `div` with `class="col"`. There must be an empty line after the `div` for embedded markdown to render.

```markdown

Content. Use `col-4` or
`col-6` to create 40% and
60% width columns,
respectively. Make sure the
numbers add up to 10 or
subsequent content may float.


```

---

Code can be included with [code fences](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks).

```python
def add(a: int, b: int) -> int:
"""
Add two integers.
"""
return a + b
```

---

Reveal.js supports special syntax to set arbitrary HTML attributes on [slides](https://revealjs.com/markdown/#slide-attributes), such as this background gradient.

```html

```

This also works for [elements](https://revealjs.com/markdown/#element-attributes):
- green bullet point

```markdown
- green bullet point
```

---

Want a full-screen image? Use the [`data-background-image`](https://revealjs.com/backgrounds/#image-backgrounds) attribute, as illustrated on the next slide with a penguin. [unsplash.com](https://unsplash.com) has a great collection of free images.

```html

```

---

---

For labeled slides, we can link back to them. E.g., the [next one](#next-slide).

---

This is a slide labeled with the id `next-slide`.

```markdown

```

Also note the vertical slide below. 👇

^^^

[Vertical slides](https://revealjs.com/vertical-slides/) can be used to logically group content. They are created using the `^^^` separator between slides.

---

> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
>
> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
>
> --- Cicero

---

| Symbol | Description |
| ---------- | -------------------------------------------------------- |
| `$n$` | Number of samples |
| `$x_{ij}$` | `$j^\text{th}$` covariate for the `$i^\text{th}$` sample |
| `$y_i$` | target for the `$i^\text{th}$` sample |

---

- important
- bullets

and

1. numbered
2. items

---

[Jekyll-style frontmatter](https://jekyllrb.com/docs/front-matter/) can be used to configure the presentation. See [`slides/frontmatter.schema.yaml`](slides/frontmatter.schema.yaml) for details.

---

Visit the [reveal.js website](https://revealjs.com/markdown/) for further information.