Can't export my custom theme - VS Code #288

jamosport · 2022-04-06T20:19:49Z

jamosport
Apr 6, 2022

Hello,
I've customed a css theme for marp in VS Code. In the interface, it works perfectely, but when i export my presentation, the layout disappears (in HTML and PDF).

---
marp : true
theme: custom-theme
---
# Test

/* custom-theme.css */
/* @theme custom-theme */

@import 'default';

section {
  background: grey;
}

But, only the default theme is loaded, right ?

Thanks in advance
Max

Answered by jamosport

Apr 9, 2022

I'd like to thank you for your help. This command works for me : marp ./marp.config.json --theme ./custom-theme.css ./myfile.md --html

View full answer

yhatt · 2022-04-07T15:44:08Z

yhatt
Apr 7, 2022
Maintainer

Have located your Markdown file in the same workspace as the custom theme? The actual workspace that the Markdown document belongs to is often different from the current workspace that is opened by VS Code. (e.g. Opening the Markdown file located out of the current workspace)

To detect whether the custom theme was recognized by the Markdown document, check that there is no error in the definition of the theme directive.

In this case, I'm in the ~/Documents/marp as the current workspace and opening 2 Markdown files located in ~/Documents/marp and ~/Documents. The former uses the custom theme from ~/Documents/marp/custom-theme.css and the other uses ~/Documents/custom-theme.css that was not found.

4 replies

jamosport Apr 7, 2022
Author

Yes, the Md file is located in the same workspace as the custom css. Then, there is no error in the definition of the theme directive :

But, in the HTML file there is no link to the custom css. All the layout is in head section :

Thanks !

yhatt Apr 8, 2022
Maintainer

It's a correct behavior that there is no external links (<link href="">) to custom theme CSS in the output. For portability of the export output, Marp compiles Markdown styles including custom theme CSS and inline styles into a one style used by <style> in <head>.

If looked like recognized the custom theme CSS by Marp correctly, try to check whether your CSS is valid by using W3C CSS validator. Invalid styles included in both of custom theme and Markdown inline styles may effect to the Marp output.

For debug the output CSS, it's good to export HTML through Marp CLI with configuration to disable minify for CSS (Refer to Marp Core constructor options).
https://github.com/marp-team/marp-cli#example
{
  "options": {
    "minifyCSS": false
  }
}
npx @marp-team/marp-cli@latest -c ./marp.config.json --theme ./custom-theme.css ./your-markdown.md

jamosport Apr 8, 2022
Author

According to the CSS Validation Service, my file is valid.

On Windows, it works with this command :
marp ./marp.config.json --theme ./custom-theme.css ./your-markdown.md

The HTML file contains HTML tags now (that i need it). According to Marp Core constructor options, it seems normal, right ? May i bypass this ?

It's almost resolved ! Thanks

yhatt Apr 8, 2022
Maintainer

In Marp CLI, adding --html option to turn on raw HTML tags in Markdown would help your case.

BTW we still cannot reproduce your reported problem. If you want to resolve problem of export in VS Code for your better workflow, please try to re-install Marp extension and share logs outputted to the developer console while exporting. ([Help] -> [Toggle Developer Tools] -> [Console] tab)

jamosport · 2022-04-09T13:20:37Z

jamosport
Apr 9, 2022
Author

I'd like to thank you for your help. This command works for me : marp ./marp.config.json --theme ./custom-theme.css ./myfile.md --html

1 reply

yhatt Apr 12, 2022
Maintainer

OK, marked as answer provisionally.

Using Marp CLI is just a workaround, and we are still welcome follow up for the original problem about not loaded custom theme in the export output of VS Code extension.

jamosport · 2022-05-31T06:38:07Z

jamosport
May 31, 2022
Author

Hello,
This time, I tried to export my slides to PDF :
marp ./marp.config.json --theme ./custom-theme.css ./myfile.md --pdf

But it doesn't work. As one of my last post, the PDF file contains HTML tags too. I tried other options, but i obtain the same result.

Thanks in advance,

2 replies

yhatt May 31, 2022
Maintainer

The provided command seems to be missing --html option again. Try to add --html for rendering raw HTML tags.

--pdf and --html can set at the same time, because --html option does not mean to specify the export file type.

jamosport Jun 1, 2022
Author

OK, thanks. It works ! I hadn't thought about it...

mahomedalid · 2026-01-05T22:46:43Z

mahomedalid
Jan 5, 2026

I am having the exact same issue. When executing marp -s . theme is loaded. If I export as marp mypresentation.md -o output.html it does not work. If I pass the parameters for the config and explicitly --theme mytheme.css it works. My theme is specified in the header of the markdown.

I am using marp cli 4.2.3 I will try to upload my presentation to a public repo if that helps.

3 replies

yhatt Jan 6, 2026
Maintainer

marp -s . is equivalent to marp -s --input-dir .. --input-dir automatically loads theme CSS files in the specified folder.

If tried to convert a single Markdown file, the custom theme file will not load because you do not specify loading theme CSS files. To load the custom CSS in the current directory, you have to specify --theme-set option as ..

marp --theme-set . -- mypresentation.md -o output.html

mahomedalid Jan 16, 2026

Thanks! That makes sense @yhatt.

I still tried with

marp .

but it did not work. I had to run

marp . --theme-set .

to get the CSS loaded. So I believe there is still some inconsistency or at least a confusing UX here. The same directory behaves differently depending on whether you use -s or not, and without an explicit flag it is not obvious why the theme is ignored.

This is my theme/presentation.

yhatt Jan 16, 2026
Maintainer

The regular conversion mode marp . and server mode marp -s . take different kinds of input ..

In the regular conversion mode, . means ./**/*.md, the multiple Markdown files in the current directory. This path is not for specifying the location of CSS themes. Thus, to use custom theme CSS files, you have to use with an additional --theme-set option as . (it means ./**/*.css)

On the other hand, the server mode --server/-s must specify a path for the single directory, to serve contents on the local server http://localhost:8080. In this case, both of Markdown and theme CSS will be found from the specified directory so you do not need --theme-set option. (This rule also applied in the regular conversion mode with --input-dir/-I option)

Marp

Can't export my custom theme - VS Code #288

Uh oh!

Uh oh!

jamosport Apr 6, 2022

Replies: 4 comments · 10 replies

Uh oh!

yhatt Apr 7, 2022 Maintainer

Uh oh!

jamosport Apr 7, 2022 Author

Uh oh!

Uh oh!

yhatt Apr 8, 2022 Maintainer

Uh oh!

Uh oh!

jamosport Apr 8, 2022 Author

Uh oh!

yhatt Apr 8, 2022 Maintainer

Uh oh!

Uh oh!

jamosport Apr 9, 2022 Author

Uh oh!

yhatt Apr 12, 2022 Maintainer

Uh oh!

Uh oh!

jamosport May 31, 2022 Author

Uh oh!

yhatt May 31, 2022 Maintainer

Uh oh!

jamosport Jun 1, 2022 Author

Uh oh!

mahomedalid Jan 5, 2026

Uh oh!

yhatt Jan 6, 2026 Maintainer

Uh oh!

mahomedalid Jan 16, 2026

Uh oh!

yhatt Jan 16, 2026 Maintainer

jamosport
Apr 6, 2022

Replies: 4 comments 10 replies

yhatt
Apr 7, 2022
Maintainer

jamosport Apr 7, 2022
Author

yhatt Apr 8, 2022
Maintainer

jamosport Apr 8, 2022
Author

yhatt Apr 8, 2022
Maintainer

jamosport
Apr 9, 2022
Author

yhatt Apr 12, 2022
Maintainer

jamosport
May 31, 2022
Author

yhatt May 31, 2022
Maintainer

jamosport Jun 1, 2022
Author

mahomedalid
Jan 5, 2026

yhatt Jan 6, 2026
Maintainer

yhatt Jan 16, 2026
Maintainer