presos

Beyond Code Presos

Index: https://beyondcodebootcamp.github.io/presos/
Sources: https://github.com/BeyondCodeBootcamp/presos/
Example: https://beyondcodebootcamp.github.io/presos/example/

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:

python 3.10.1
mdslides
a single markdown file

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:

The [comment]: # (!!!) bits signify the END of a slide and contain metadata pertaining to the slide above them.
DO NOT use prettier on the slides (it will ruin the comments)
```
echo '**/*.md' >> .prettierignore
```

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

Slide Themes: https://revealjs.com/themes/ (ex: white)
Code Themes: https://highlightjs.org/ (ex: zenburn)
Slide Configuration: https://revealjs.com/config/

Render Slides

Navigate to the directory for your presentation:

mkdir ./my-presentation
pushd ./my-presentation

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

The website directory will be the markdown file
```
open ./slides/index.html
```