Skip to content

Create stunning presentations using markdown powered by reveal.js.

License

Notifications You must be signed in to change notification settings

tillahoffmann/slides

Repository files navigation

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

📽️ slides

Create stunning presentations using markdown powered by reveal.js.

Markdown Slides PyPI


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.


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 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.

<div class="col-6">

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.
</div>

Code can be included with code fences.

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, such as this background gradient.

<!-- .slide: data-background-gradient="radial-gradient(#E5CAC9, #B55A5A)" -->

This also works for elements:

  • green bullet point
- green bullet point <!-- .element: style="color: #4db848" -->

Want a full-screen image? Use the data-background-image attribute, as illustrated on the next slide with a penguin. unsplash.com has a great collection of free images.

<!-- .slide: data-background-image="[path-to-image-file]"-->


For labeled slides, we can link back to them. E.g., the next one.


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

<!-- .slide: id="next-slide" -->

Also note the vertical slide below. 👇

^^^

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 can be used to configure the presentation. See slides/frontmatter.schema.yaml for details.


Visit the reveal.js website for further information.

About

Create stunning presentations using markdown powered by reveal.js.

Topics

Resources

License

Stars

Watchers

Forks