presos

Beyond Code Presos

Presentation Slides + Videos:

Quick Start to Render

watchexec -e md -w "YOUR_PRESO.md" -- mdslides "YOUR_PRESO.md"

These slides are built with Markdown Slides

You’ll need:

How to Install Pyenv + Python

See https://webinstall.dev/pyenv

Install pyenv

curl -sS https://webi.sh/pyenv | sh

If you see WARNING: Can not proceed... remove '~/.pyenv' first, then you already have pyenv installed. No worries. Carry on.

Install the latest python 3

Check the latest version:

pyenv update
pyenv install --list | grep -vi '[a-z]' | tail -n 1

You can install that or, if you want to have the exact setup as I have, use 3.10.1:

pyenv install -v 3.10.1

Then set that to the current version for your project:

pyenv local 3.10.1
python --version

(or echo '3.10.1' > ./.python-version)

Install Markdown Slides with pip

python -m pip install git+https://gitlab.com/da_doomer/markdown-slides.git

Create Slides

See presentation.md and the reveal.js cheat sheet.

Slides look like this:
See example.md.

[comment]: # "THEME = white"
[comment]: # "CODE_THEME = zenburn"
[comment]: # "controls: false"
[comment]: # "keyboard: true"
[comment]: # "markdown: { smartypants: true }"
[comment]: # "hash: false"
[comment]: # "respondToHashChanges: false"

# Great Title

A great slide

[comment]: # "!!!"

# A Second Slide

Another great slide

[comment]: # "!!! data-auto-animate"

# An Animated Slide

A really WOW slide

[comment]:
  #
  "!!! data-auto-animate data-background-color='aquamarine'"

```js [1-2|3|4]
let a = 1;
let b = 2;
let c = (x) => 1 + 2 + x;
c(3);
```

<!-- .element: data-id="code" -->

[comment]: # "!!! data-auto-animate"

```js [5]
let a = 1;
let b = 2;
let c = (x) => 1 + 2 + x;
c(3);
c(5);
```

<!-- .element: data-id="code" -->

[comment]: # "!!! data-auto-animate"

Note:

It’s basically reveal.js, but with the nasty html taken out of your way.

Render Slides

  1. Navigate to the directory for your presentation:
    mkdir ./my-presentation
    pushd ./my-presentation
    
  2. Render the slides
    • as html
      mdslides ./slides.md
      
    • or as a pdf
      mdslides --pdf ./slides.md
      
    • include additional assets as needed
      mdslides --include ./img --include ./js ./slides.md
      
  3. The website directory will be the markdown file
    open ./slides/index.html