marpit icon indicating copy to clipboard operation
marpit copied to clipboard

Support setting local CSS file in style global directive

Open marioarbras opened this issue 5 years ago • 2 comments

Right now you can define a CSS style as a global directive to extend a base theme. It appears this can only be written inline, e.g. from documentation:

---
theme: base-theme
style: |
  section {
    background-color: #ccc;
  }
---

If there is a considerable amount of styling being applied, it would be useful to be able define a local CSS style file and simply set its path in the style directive, e.g.:

---
theme: base-theme
style: "style.css"
---

style.css file would then contain

section {
    background-color: #ccc;
  }

marioarbras avatar Feb 25 '19 04:02 marioarbras

Nice suggestion, but Marpit cannot handle local files while rendering.

We have to manipulate style defined in style directive or <style> tag via PostCSS for converting style to suit to Marpit slides. So it requires loading CSS content if it would support external CSS, but the base converter (markdown-it) does not support an async architecture that is desired to handle file I/O.

In addition, it would prevent working on the environment without supporting file system, like a browser and web worker.

I agree with this suggestion, but we need to solve these problems.

yhatt avatar Feb 25 '19 11:02 yhatt

why not just?

theme:  `style.(s)css`

and all styles will be inherited from the default theme style.

calidion avatar Nov 08 '19 09:11 calidion