I Hate PowerPoint

Let me get this out of the way: I haven’t touched PowerPoint since middle school. I forgot how it works. I don’t want to remember.

When I worked at BitNinja, I had to give presentations all the time. Technical talks, demos, explanations. Every time someone said “can you prepare some slides?” I died a little inside. Not because I hate presenting - I actually enjoy it. I hate the tools.

Why isn’t markdown the default document format everywhere? Google Docs, Confluence, wherever. Why can’t I just Ctrl+C, Ctrl+V raw markdown and have it work?

Obsidian Advanced Slides Was Great

I keep my notes in Obsidian. I’m not great at note-taking (working on it), but Obsidian has this killer feature - you can create presentations in markdown with the Advanced Slides plugin. It’s based on Reveal.js and it’s honestly impressive.

I’ve used it multiple times to present stuff. It can even export to HTML, which made me think - could I host these as static pages on my Hugo blog?

Then it hit me: Hugo already converts markdown to HTML. Why am I even thinking about plugins? Let’s just build this into the blog.

Claude: To be fair, you could’ve Googled “Hugo presentation plugin” first. But where’s the fun in that?

What We Built Today

Spent the afternoon with Claude building a proper markdown presentation system directly into my Hugo blog. Here’s what works:

Basic Features:

  • Markdown slides separated by --- (horizontal) and -- (vertical)
  • Reveal.js themes and transitions
  • Code highlighting with Monokai theme
  • Speaker notes (press S during presentation)
  • Overview mode (press O)
  • Fullscreen, zoom, search

The Fun Stuff:

  • Drawing tools - press B for chalkboard, C for canvas
  • Color palette that actually works (this took way too long)
  • Tables and GFM markdown support
  • Mermaid diagrams
  • Right-click to erase drawings

The Technical Bits

Layout Structure

Created a new content type under content/slides/ with its own layout:

<div class="reveal">
  <div class="slides">
    {{ $content := .RawContent }}
    {{ $content = replace $content "{{ .Params.theme }}" (.Params.theme | default "black") }}
    {{ $content = replace $content "{{ .Params.transition }}" (.Params.transition | default "slide") }}
    <section data-markdown
             data-separator="^\r?\n---\r?\n$"
             data-separator-vertical="^\r?\n--\r?\n$"
             data-separator-notes="^Note:">
      <textarea data-template>
{{ $content }}
      </textarea>
    </section>
  </div>
</div>

The regex separators (^\r?\n---\r?\n$) are crucial - without them, markdown table headers break because they also use ---.

Chalkboard Drama

Getting the drawing tools to work was… an experience. The color palette kept refusing to show up. Turns out:

  1. Font Awesome wasn’t loaded (palette uses FA icons)
  2. The eraser icon kept getting stuck in “eraser mode”
  3. CDN versions were mismatched

Final solution:

chalkboard: {
  boardmarkerWidth: 3,
  chalkWidth: 7,
  background: [ 'rgba(127,127,127,.1)' , 'https://cdn.jsdelivr.net/gh/rajgoel/reveal.js-plugins@latest/chalkboard/img/blackboard.png' ],
  grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
  boardmarkers: [
    { color: 'rgba(100,100,100,1)', cursor: 'url(...)' },
    // ... 7 colors total
  ],
  chalks: [
    { color: 'rgba(255,255,255,0.5)', cursor: 'url(...)' },
    // ... 7 colors with transparency
  ]
}

And we hid the eraser icon with CSS because it was problematic:

.palette li[data-eraser="true"] {
  display: none !important;
}

Right-click works fine for erasing anyway.

GFM Markdown

To get tables and text highlighting working, had to enable GitHub Flavored Markdown:

markdown: {
  gfm: true,
  mangle: true,
  pedantic: false,
  smartLists: false,
  smartypants: false,
  separator: /^\r?\n---\r?\n$/m,
  verticalSeparator: /^\r?\n--\r?\n$/m,
  notesSeparator: 'Note:'
}

Now ==highlighted text== renders properly (though the rendering still has issues we need to fix).

What We Learned

CDN Hell is Real

  • cdn.jsdelivr.net/npm/reveal.js-plugins - outdated
  • cdn.jsdelivr.net/gh/rajgoel/reveal.js-plugins - works

Speaker Notes Are Broken in Vivaldi The Notes plugin works fine in Chrome/Brave, but Vivaldi chokes on it. Some JSON parsing error. Works around it by using Chrome for presenting.

Debugging Browser Plugins Added debug logging to track chalkboard initialization:

Reveal.on('ready', () => {
  console.log('Palette elements:', document.querySelectorAll('.palette'));
  console.log('Chalkboard container:', document.querySelectorAll('.chalkboard, .notescanvas'));
});

Turns out the palette existed in the DOM but wasn’t visible because Font Awesome wasn’t loaded. Classic.

The Demo Presentation

Created a full demo presentation showing off all features. It has:

  • Vertical slide navigation examples
  • Code highlighting (JavaScript, Python)
  • Tables with proper rendering
  • Mermaid diagrams
  • Drawing tools documentation
  • Keyboard shortcuts reference

Check it out live - it’s interactive!

What’s Still Broken

Text Highlighting The ==highlight== syntax renders but doesn’t look right. Need to tweak the CSS more.

Mermaid Diagrams Added the plugin but haven’t fully tested complex diagrams yet.

Theme Variables Had to manually replace Hugo template variables in the markdown because they don’t process correctly in the data-template. Works but feels hacky.

Why This Matters

I’ve got 3-4 presentations I need to give soon. Now I can actually write them without wanting to throw my laptop out the window.

Markdown presentations mean:

  • Version control with git
  • Easy to edit anywhere (just a text file)
  • No proprietary formats
  • Can embed in my blog
  • Presenter mode works great
  • Drawing on slides during live demos

Is this a skill issue? Absolutely. But I’d rather pay someone who solves problems than someone who’s really good at Excel/Word/PowerPoint.

Claude: We spent like 2 hours debugging why the color palette wouldn’t show up. The answer was “you forgot to load Font Awesome.” Sometimes it’s the simple things.

What’s Next

  • Fix the text highlighting CSS properly
  • Test Mermaid diagrams with complex examples
  • Maybe add some transition animations
  • Convert my old Obsidian Advanced Slides presentations
  • Actually give some presentations with this

The code’s all in the markdown-slides branch. Once we merge this, I can start moving presentations from old_presentaions/ into the slides section.

Try it yourself: Check out the demo presentation live. Press B to draw on slides, S for speaker notes, O for overview. Arrow keys to navigate, down arrow for vertical slides.

PowerPoint? Never heard of her.