Marp theme folder hierarchy

marp-team / marp-vscode

Marp for VS Code: Create slide deck written in Marp Markdown on VS Code

https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode

MIT License

1.59k stars 76 forks source link

Marp theme folder hierarchy #181

Closed nicola-lunghi closed 3 years ago

nicola-lunghi commented 4 years ago

Hi,

I have the following directory structure

themes/
    my_theme.css
assets/
    logo.png
    bg.png
presentations/
     doc1/
         assets/
         presentation1.md
         presentation2.md
         presentation3.md
     conference2/
         assets/
         presentation1.md
     conference3/
         assets/
         presentation1.md

I want to use in my custom theme some custom images (logo and bg) that are in the main assets folder.

background: url(./assets/bg.png)

The problem is that it seems that the path for the css are relative to the presentation file and not to the css. Also there's a way in which I can tell vscode where to put my files instead of selecting every time the folder? Like to batch make all the files?

Thanks Nick

yhatt commented 4 years ago

The base path of CSS will be always same as .md file because CSS theme will bundle to Marp presentation as the inline stylesheet.

Surely it seems like counterintuitive so preprocessing for relative URL resolution in Marp (or Marpit framework) may be good.

These are workarounds:

Use URI started with https:// for assets (Marp recommends to upload assets into online due to prevent security problems by third-party themes).
Add theme CSS preprocessing for encode images into inline base64, just like Marp Core is doing.

If you want advanced conversion and batch processing, we recommend to use Marp CLI. The VS Code extension has intentionally designed for a simple workflow.

MiguelDomingues commented 4 years ago

I've came across a similar issue. To make things simple, I embedded the images (in base64) into a CSS file directly - this is not a perfect solution, it is more a workaround, but works on VSCode and CLI.

Something like this:

background-image: url(data:image/png;base64,----PLAECE HERE THE IMAGE ENCODED IN BASE64----);

The CSS will become quite larger with images, specially because base46 encoding uses more bytes So far, I've not had any performance issues.

yhatt commented 3 years ago

Close to keep cleaning issue tracker. marp-team/marp#86 also has discussed about this issue so please use GitHub Discussions to continue.