Skip to main content

Mariano Guerra's Log

This is my blog, more about me at marianoguerra.github.io

🦋 @marianoguerra.org 🐘 @marianoguerra@hachyderm.io 🐦 @warianoguerra

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 https://cdnjs.cloudflare.com/ajax/libs/remark/0.14.0/remark.min.js -O remark.js

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

<!DOCTYPE html>
<html>
  <head>
    <title>Presentation Title</title>
    <meta charset="utf-8">
    <style>
      *{ font-family: 'sans'; }
      .remark-slide-container, .remark-slide-content{
          color:white;
          background-color:#0d4774;
      }
      .remark-slide-content{
          font-size: 2em;
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
      }
      .remark-slide-scaler{
        box-shadow:none;
      }
      a,a:visited{color:white;}
      code{font-size: 0.8em !important;}
      h1, h2, h3 {
        font-weight: normal;
      }
      .remark-slide-content.reverse{color:white;}
      .reverse-text h1{color: #fefefe; background-color: #111; padding: 0.2em;}
      .remark-code, .remark-code *{ font-family: 'monospace'; white-space:pre}
      .slide-video{padding-top:1vh}
      .slide-video video{height:61vh}
      .slide-table{padding:1em 0}
      .no-padding{padding:0}
    </style>
  </head>
  <body>
    <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

    </textarea>
    <script src="./remark.js">
    </script>
    <script>
      remark.create({
        ratio: '16:9',
        slideNumberFormat: '' // '%current% / %total%'
      });
    </script>
  </body>
</html>

Then start a webserver in the folder:

python3 -m http.server

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

Then:

  • 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