::::::::::::::::::::::::::::::: This Deck is Just HTML and CSS ============================== And I wrote it in Markdown* (*with a teeny-tiny extension)
Michael Thornburgh ::::::::::::::::::::::::::::::: # ``` pikchr x-current-color svg-only text "PowerPoint is awful" ``` ::::::::::::::::::::::::::::::: # ``` pikchr x-current-color svg-only text "Markdown" big big "so hot right now" "(and easy)" small small ``` ::::::::::::::::::::::::::::::: Inspirations ============ * `sent` ([`https://tools.suckless.org/sent/`][sent]) * “Simple Plaintext Presentation Tool” * A little _too_ simple * X11 display only * `ssg` ([`https://github.com/jroimartin/ssg`][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 [sent]: https://tools.suckless.org/sent/ [ssg]: https://github.com/jroimartin/ssg ::::::::::::::::::::::::::::::: Anti-Inspiration: [Pandoc][] ============================ * “a universal document converter” * Overkill * Really heavyweight * HTML presentations rely on JavaScript [Pandoc]: https://pandoc.org/ ::::::::::::::::::::::::::::::: Solution: Static Style-able HTML ================================ * Deck is an `
` * Each slide is a `
` * First slide is the title slide * First element of a `
` 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 `
` 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 `
`s * I’ll show you it later ::::::::::::::::::::::::::::::: Example ======= ::::::::::::::::::::::::::::::: This Deck is Just HTML and CSS ============================== And I wrote it in Markdown* (*with a teeny-tiny extension) ::::::::::::::::::::::::::::::: Solution: Static Style-able HTML ================================ * Deck is an `
` * Each slide is a `
` * First slide is the title slide * First element of a `
` is the slide’s title * Can include SVG, images, even videos * Stylesheet turns it into a presentation ::::::::::::::::::::::::::::::: # ``` pikchr x-current-color svg-only text "What about diagrams?" ``` ::::::::::::::::::::::::::::::: 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
``` pikchr @pipeline x-current-color svg-only A1: arrow right box rad 5px "mdsection.awk" mono "Preprocessor" fit A2: arrow box same "pikchr" mono "Preprocessor" A3: arrow box same "Any" bold "Markdown" "Formatter" fit A4: arrow define diag { line invis go 5% heading 45 from (0.4<$1.start,$1.end>) } diag(A1) "Slide Delims + Markdown + Pikchr" ljust aligned above diag(A2) "HTML + Markdown + Pikchr" ljust aligned above diag(A3) "HTML + Markdown + SVG" ljust aligned above diag(A4) "HTML + SVG" ljust aligned above arrow <- down 125% from A4 text "deck.css" mono ```
::::::::::::::::::::::::::::::: Section Preprocessor ==================== #! /usr/bin/env awk -f /^:::+$/ { print lastSection ? "
" : "
" printf "
\n", ++page lastSection = NR } (NR != lastSection) END { if(lastSection) print "\n\n
\n
" } ::::::::::::::::::::::::::::::: 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: | Column 1 | Column 2 | | -------------- | -------------- | | row 1 column 1 | row 1 column 2 | | row 2 column 1 | row 2 column 2 | | row 3 column 1 | row 3 column 2 | | row 4 column 1 | row 4 column 2 | ::::::::::::::::::::::::::::::: # ![](bottle-small.jpg) ::::::::::::::::::::::::::::::: Links ===== * [This project](https://github.com/zenomt/mdslides) on GitHub * [Markdown source of this presentation](https://zenomt.github.io/mdslides/mdslides.md.in) * [`deck.css` presentation stylesheet](https://zenomt.github.io/mdslides/deck.css) * [Pikchr home page](https://pikchr.org/) * [Pikchr command-line tool](https://github.com/zenomt/pikchr-cmd) * [`mdsection.awk` preprocessor](https://zenomt.github.io/mdslides/mdsection.awk) * [MD4C `md2html`](https://github.com/mity/md4c/tree/master/md2html), the Markdown formatter I use * [Nathan Knowler on Codepen](https://codepen.io/knowler), the starting point for `deck.css` ::::::::::::::::::::::::::::::: #
made with vi