How to use an external css-file in conjunction with the default marp theme?

[StefanZander]

Hello Marp-Community,

I am using marp-cli to create lecture slides. In order to fine tune the slide content, I have created a custom-css that extends some style rules implemented in the marp default css template.

My objective: I want to externalize the css rules in a separate custom-theme.css file and remove them from the .md-document in which the slides' content resides.

The problem: When calling the custom-theme.css using marp-cli with the --theme-set option, I can not specify that my css "extends" the style rules of the default template or that both styles should be used in conjunction

The question: What is the best way to tell marp-cli that my custom-theme.css should be used in conjunction with the marp default template?

Thanks in advance for the support.

N.B. Following your support rules, I wanted to post this question on stackoverflow but creating a marp or marp-cli tag requires a reputation of 1500.

N.B.(2) I forgot to mention that I really like the marp tool set and appreciate all the hard work the developers put into the project.

[yhatt]

Use @import 'default'; to import CSS rules from default theme. See also "Customized theme" section for Marpit framework.

/* @theme your-theme */

@import 'default';

section {
  /* your CSS rules ... */
}

[StefanZander]

Thank you very much @yhatt for the quick reply.

I added the line to my css file as described in your post.

However, when running the marp command with

marp --engine ./engine.js --bespoke.progress --watch --theme-set custom-theme.css -- --html mymarkdownfile.md

the marp-cli seems to not be able to dereference the default theme. Do I need to add something to my engine.js file?

Thank you very much in advance for your support.

[yhatt]

Default theme is a part of Marp Core. If not worked @import 'default';, engine.js probably may be using Marpit framework instead of Marp Core.

[StefanZander]

Thanks @yhatt for the suggestion.

I tried in engine.js

const MarpIt require('@marp-team/marpit')
module.exports = (opts) => new MarpIt(opts).use(...);

but got the response [ ERROR ] The specified engine has not resolved.

If it is not working, I still could add an @import 'custom-theme.css in the <style> tags in my markdown file – although it want to leave them out.

edit: Using the @import 'custom-theme.css in the <style> tags in a markdown file

<style>
/**
 * @theme enable-all-auto-scaling
 * @auto-scaling true
 */

@import url('custom-theme.css');
</style>

does not fully work; it seems that some style properties are not resolved, e.g. the font-family declaration:

:root{
    font-family: 'Barlow Condensed';
    font-weight: 400;
    font-size: 1.6rem; 
    color: rgb(10, 40, 72);
    background-color: #e6e6e6;
}

[yhatt]

More specific advices:

• If you not required engine customization, just removing --engine ./engine.js from CLI arguments should work.
• If you have to keep customization:
  1. Install @marp-team/marp-core to your local project via npm install @marp-team/marp-core or yarn add @marp-team/marp-core.
  2. And use Marp class from @marp-team/marp-core instead of Marpit, just like below.

const { Marp } = require('@marp-team/marp-core')
module.exports = (opts) => new Marp(opts).use(...)

[StefanZander]

@yhatt, I require customization in order to use extensions (markdown-it-mark, markdown-it-container, markdown-it-attrs etc.); therefore, I am using the engine.js implementation as stated in the docs.

Thanks for the code fragment; my code in engine.js looks identical to yours

// engine.js
const { Marp } = require('@marp-team/marp-core')

const markdownItMark = require('markdown-it-mark')
const markdownItAttrs = require('markdown-it-attrs')
const markdownItContainer = require('markdown-it-container')
const markdownItFootnote = require('markdown-it-footnote')
const markdownItDiv = require('markdown-it-div')
// const markdownIt = require('markdown-it')

module.exports = (opts) => new Marp(opts)
// .use(markdownIt)
.use(markdownItMark)
.use(markdownItAttrs)
.use(markdownItContainer, 'definition')
.use(markdownItContainer, 'task')
.use(markdownItContainer, 'note')
.use(markdownItContainer, 'columns')
.use(markdownItContainer, '1st-col')
.use(markdownItContainer, '2nd-col')
.use(markdownItContainer, '3nd-col')
// .use(markdownItFootnote) // disabled because it causes error with marp-cli
.use(markdownItDiv)
.use(require('markdown-it-fontawesome'));

I used the marp class exactly as you described but then I could not make the marp-cli to use both, the default theme and my custom theme in conjunction.

Anyway, not be best solution but I could still revert to including all style information in the markdown-file, although I would love to have them separated to reuse the custom-theme in other marp projects.

[yhatt]

Hm, I'm feeling it's weird. I've tried to use default theme + custom styling in minimum assets and it is working correctly.

---
theme: custom-theme
---

# Hello, world!

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

@import 'default';

section {
  /* Override default background */
  background: #def;
}

marp --engine ./engine.js --bespoke.progress --watch --theme-set custom-theme.css -- mymarkdownfile.md

[yhatt]

More hints

• Is there a theme name definition /* @theme foobar */ in theme CSS?
• Is Markdown having theme directive with referring added theme? (theme: foobar)
• Is theme valid CSS? (https://jigsaw.w3.org/css-validator/validator.html)
• Aren't some CLI options defining after double-dash (--)?
  • -- means the end of CLI options so defined options after -- would be ignored.

[StefanZander]

@yhatt: With your example, I managed to get it working -- perfect!

Thank you very much for the support!

edit: It was unclear to me that the theme declarative requires as value the name given in /* @theme custom-theme */...

[Jonesckevin]

@import url('custom-theme.css');

Thank you. This worked as intended. I used: