Slidev Tip - Export With Background Images Using "slidev export --per-slide"

How to configure the Slidev export function to include the background theme's styling?

Table of Content

• What is Slidev?
• Question / Problem
  • Desired Outcome vs Actual Result
• Solution
  • Export Slidev to PDF with background
  • Export Slidev to PNG with background
• Appendix
  • Slidev Export Options
  • Big Thanks to 0phoff

What is Slidev?

Snippet from sli.dev/guide/:

Slidev (slide + dev, /slaɪdɪv/) is a web-based slides maker and presenter. It's designed for developers to focus on writing content in Markdown while also having the power of HTML and Vue components to deliver pixel-perfect layouts and designs with embedded interactive demos in your presentations.

Question / Problem

I was exporting my kintone-for-hackathon Slidev as PNG and PDF, but the background is missing (teal bubbles).

I needed to figure out how to change the export function to include the background in my exports.

Desired Outcome vs Actual Result

Desired Outcome	Actual Result
Includes the teal bubbles in the background.	Does not include the teal bubbles in the background.

Solution

By default, the Slidev export function does not render the background styling (PNG or SVG).

So then, by using the --per-slide option, slides are rendered individually and include all information.

Export Slidev to PDF with background

slidev export --per-slide --format pdf

Export Slidev to PNG with background

slidev export --per-slide --format png

Result

Exported PDF	Exported PNG

Appendix

Slidev Export Options

❯ slidev export --help
slidev export [entry..]

Export slides to PDF

Positionals:
  entry  path to the slides markdown entry        [array] [default: "slides.md"]

Options:
  -t, --theme            override theme                                 [string]
      --output           path to the output                             [string]
      --format           output format    [string] [choices: "pdf", "png", "md"]
      --timeout          timeout for rendering the print page           [number]
      --range            page ranges to export, for example "1,4-5,6"   [string]
      --dark             export as dark theme                          [boolean]
  -c, --with-clicks      export pages for every clicks                 [boolean]
      --executable-path  executable to override playwright bundled browser
                                                                        [string]
      --with-toc         export pages with outline                     [boolean]
      --per-slide        slide slides slide by slide. Works better with global
                         components, but will break cross slide links and TOC in
                         PDF                                           [boolean]
  -h, --help             Show help                                     [boolean]
  -v, --version          Show version number                           [boolean]

Big Thanks to 0phoff

Thank you 0phoff for pointing out that Slidev's export has more options than specified in the sli.dev documentation.