Skip to main content

Hi, I'm Mariano Guerra, below is my blog, if you want to learn more about me and what I do check a summary here: or find me on twitter @warianoguerra or mastodon

Quick and Easy Web Slides with RemarkJS

Say you (I) want to create a quick presentation, a plus if you can share a link to the slides, another plus if you can use your text editor and markdown instead of something more complex.

Say you (I) probably know about remarkjs but doing it each time starting from the previous presentation is getting annoying.

Say you (I) want a place to go to copy paste the things to get started.

Well, here it is, a quick and easy way to get started with a web presentation using remarkjs

First create a folder:

mkdir my-presentation
cd my-presentation/

Then download the latest version of remarkjs:

wget -O remark.js

Then copy this html and paste it into a file named index.html in the same folder:

<!DOCTYPE html>
    <title>Presentation Title</title>
    <meta charset="utf-8">
      *{ font-family: 'sans'; }
      .remark-slide-container, .remark-slide-content{
          font-size: 2em;
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
      code{font-size: 0.8em !important;}
      h1, h2, h3 {
        font-weight: normal;
      .reverse-text h1{color: #fefefe; background-color: #111; padding: 0.2em;}
      .remark-code, .remark-code *{ font-family: 'monospace'; white-space:pre}
      .slide-video video{height:61vh}
      .slide-table{padding:1em 0}
    <textarea id="source">

class: center, middle

# Hi


class: center, middle

![An Image](image.png)


background-image: url(a-slide-background.png)


class: center, slide-video

<video controls src="a-video.mp4">


class: center, middle

# Thanks

    <script src="./remark.js">
        ratio: '16:9',
        slideNumberFormat: '' // '%current% / %total%'

Then start a webserver in the folder:

python3 -m http.server

Open your browser and go to http://localhost:8000/


  • Change the title

  • Maybe change the background color and style

  • Remove/Edit the slides

  • Play with remark settings at the bottom of the index.html file


Comments powered by Disqus