This Deck is Just HTML and CSS

And I wrote it in Markdown*

(*with a teeny-tiny extension)

Inspirations

• sent (https://tools.suckless.org/sent/)
  • “Simple Plaintext Presentation Tool”
  • A little too simple
  • X11 display only
• ssg (https://github.com/jroimartin/ssg)
  • “simple slide generator”, 380 lines of Perl
  • “markdown-like” syntax, but too cluttery, also too simple, no good answer for images/diagrams
  • Postscript output only

Anti-Inspiration: Pandoc

• “a universal document converter”
• Overkill
• Really heavyweight
• HTML presentations rely on JavaScript

Solution: Static Style-able HTML

• Deck is an <article>
• Each slide is a <section>
• First slide is the title slide
• First element of a <section> is the slide’s title
• Can include SVG, images, even videos
• Stylesheet turns it into a presentation

Solution: CSS Stylesheet

• “Creating a Slide Deck with Just HTML and CSS” by Nathan Knowler on Codepen got me halfway
• Each <section> fills viewport
• First slide has distinct Title Slide styling
• scroll-snap to next slide
• CSS Counter for auto slide numbering
• Page break at each slide for printing or PDF

Solution: Write it in Markdown

• Easiest way to author HTML
• Extend with slide delimiter: “:::”
  • 8 lines of Awk converts to <section>s
  • I’ll show you it later

Example

<link rel="stylesheet" href="deck.css" />

:::::::::::::::::::::::::::::::

This Deck is Just HTML and CSS
==============================
And I wrote it in Markdown*

<small><small>(*with a teeny-tiny extension)</small></small>

:::::::::::::::::::::::::::::::

Solution: Static Style-able HTML
================================

* Deck is an `<article>`
* Each slide is a `<section>`
* First slide is the title slide
* First element of a `<section>` is the slide’s title
* Can include SVG, images, even videos
* Stylesheet turns it into a presentation

Pikchr Open-Source Picture Language

• Based on pic “boxes and arrows” tool of Unix yore
• Written by author of SQLite for its documentation
• Embeds in Markdown, generates inline SVG
• Open-source command-line driver tool written by me for use with any Markdown formatter

“Build” Pipeline the Unix Way™

$ awk -f mdsection.awk mdslides.md.in | pikchr | md2html --github > mdslides.html

Section Preprocessor

#! /usr/bin/env awk -f

/^:::+$/ {
    print lastSection ? "</section>" : "<article>"
    printf "<section id='page-%d'>\n", ++page
    lastSection = NR
}

(NR != lastSection)

END {
    if(lastSection)
        print "\n\n</section>\n</article>"
}

Pikchr Example

``` pikchr x-current-color svg-only requote delimiters
# This is the actual source requoted by the pikchr tool.
dot
line 150% "A Line" above
box "A Box"
arrow 150% dashed
circle "A" "Circle"
arrow
arrow radius .05 right .1 then down then \
    left until even with first line then to first line
```

Blockquotes

“You can use a blockquote to show something that someone said. Blockquotes look like this.”

Michael Thornburgh, June 2025

Tables

Some Markdown processors (like MD4C md2html) support GitHub-style tables:

Links

• This project on GitHub
• Markdown source of this presentation
• deck.css presentation stylesheet
• Pikchr home page
• Pikchr command-line tool
• mdsection.awk preprocessor
• MD4C md2html, the Markdown formatter I use
• Nathan Knowler on Codepen, the starting point for deck.css