search

marp-team / marp-cli

A CLI interface for Marp and Marpit based converters
MIT License
1.91k stars 107 forks source link

Customising top and bottom black bars #358

Closed danielepolencic closed 3 years ago

danielepolencic commented 3 years ago

I tried to search for a solution in this repository and in the marp-team/core. I could not make it work, hence the question. I want to customise the <body> of the presentation so that the slides are presented on a white background.

I added the following directive to my markdown:

---
style: |
  body {
    background: red !important
  }
---

... slides here

However, I cannot remove the black bars. image

What should I try next?

Thanks.

yhatt commented 3 years ago

<body> is out of scope for tweaking style by Markdown and the style of Marp CLI template cannot customize. You should create HTML manually by using @marp-team/marp-core.

Actually it's not impossible but we do NEVER recommend ```markdown --- style: | @import url('data:text/css,body{background:white;}'); --- ``` The external stylesheet imported by `@import url('...')` will not scope to slides. It is always at the global. But customizing style of the outside of slide will lose the portability of Marp Markdown for other ecosystem integrations (e.g. Marp for VS Code, Marp Web, 3rd party tools, web-embeded slide, etc). **We do NEVER recommend.**
danielepolencic commented 3 years ago

Understood, thanks for the prompt response.

yhatt commented 2 years ago

UPDATE: The latest Marp CLI v1.5.0 follows the update of the base framework Marpit. It can style the slide container through ::backdrop CSS selector.

Now you can change the black backdrop without hack:

---
style: |
  ::backdrop {
    background: red;
  }
---