PDF Export 9:16 Size

[mwiemeyer]

I am preparing a slide-deck for mobile view in 9:16 aspect ratio.

The aspect ratio is observed in the previewer, but when I export the slides to pdf or pptx, they are "printed" on an a4 sheet with whitespace to the right and to the bottom of each slide.

I tried putting a theme.css into the same folder as the presentation with this content:

/* @theme 916 */

@import 'default';

section {
  width: 360px;
  height: 640px;
}

and calling it in the frontmatter like this:

---
marp: true
size: 16:9
theme: 916
paginate: true
---

But this didn't change the output. I tried this on a windows 11 vscode installation and on an ubuntu 22.04 vscode installation.

Please help. I have spent half a day trying to solve this.

[yhatt]

If your theme was recognizing by Marp correctly, just removing a line size: 16:9 would have to work. It instructs overriding the 9:16 page size specified in the theme's section selector into 16:9 (1280x720: Size preset inherited from the built-in themes).

[mwiemeyer]

Thanks a lot for your kind reply. I removed the line "size 16:9" but to no effect. I believe that the theme was not recognized. Any Idea what I could do?

[yhatt]

Is not VS Code reporting theme issues? If there was an yellow underline at theme: 916, you can see that your custom theme is not loading.

To set the workspace preference markdown.marp.themescorrectly, we recommend to set the path for theme CSS with the relative path from the VS code project root. e.g. ./theme.css.

[mwiemeyer]

Excellent. That solved it. Makes my day.

[mwiemeyer]

Let me explain how this worked for me - jut in case some other people face the same issue.

I am not a coder, I am a writer but I like markdown and enjoy using markdown for presentations. I know some css and html, so marp was a good fit for me. But I am not experienced with vscode. I installed it just because it hat the marp integration. Many of the explanations in the discussion forum were beyond my level of understanding. I need foolproof explanations.

So if there are more vscode-newbies like me, here is a step-by-step for dummies explanation how to create and use a custom template:

1. Create template-file and call it theme.css. Save it in the same folder as your markdown-presentation.
2. You can put any css.rules you like into the theme-file. In my case, since I only wanted 9:16 aspect-ratio, it looked like this:

/* [@theme](https://github.com/theme) 916 */
[@import](https://github.com/import) 'default';
section {
width: 360px;
height: 640px;
}

1. In Vscode, Hit [F1]-Key
2. Enter "preferences" in the input-field
3. Hit [Enter]
4. Enter "markdown.marp.theme" in the next input-field
5. Klick on [Add Item]-button.
6. Add './theme.css' (without the ' ' ) into the next input-field. This will enable marp to find your file named "theme.css" in the same directory as the presentation.
7. Then call the theme in the frontmatter of your markdown presentation like this:

---
marp: true
theme: 916
---
Important: The name you use is not the filename of the css-file (i.e. theme.css) but the name assigned at the top of the teme.css-file, in my case 916.

I hope this helps anybody else with the same problem.