Closed StefanZander closed 4 years ago
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 ... */
}
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.
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.
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;
}
More specific advices:
--engine ./engine.js
from CLI arguments should work.@marp-team/marp-core
to your local project via npm install @marp-team/marp-core
or yarn add @marp-team/marp-core
.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(...)
@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.
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
/* @theme foobar */
in theme CSS?theme
directive with referring added theme? (theme: foobar
)--
)?
--
means the end of CLI options so defined options after --
would be ignored.@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 */
...
@import url('custom-theme.css');
Thank you. This worked as intended. I used:
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 conjunctionThe 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
ormarp-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.