marp-team / marpit Goto Github PK
View Code? Open in Web Editor NEWThe skinny framework for creating slide deck from Markdown
Home Page: https://marpit.marp.app/
License: MIT License
The skinny framework for creating slide deck from Markdown
Home Page: https://marpit.marp.app/
License: MIT License
I try to use Marp Web and atom-marp, both of them cannot display the local image.
Recently we found a strange case: the unexpected print header and footer is appeared.
import Marpit from '@marp-team/marpit'
import fs from 'fs'
const marpit = new Marpit()
const { html, css } = marpit.render('# Hello')
fs.writeFileSync('deck.html', `<!DOCTYPE html><html><body><style>${css}</style>${html}</body></html>`)
<!DOCTYPE html>
<html>
<body>
<iframe src="deck.html" id="iframe"></iframe>
<button onclick="document.getElementById('iframe').contentWindow.print()">Print</button>
</body>
</html>
When you hit "Print" button in Chrome 71, print header and footer are appeared in print preview. But it would disappear if you change any print option.
A printed PDF is here.
We should be expected to hide print header and footer by default.
Recently I saw some media that introduces Marp ecosystem with the wrong how to use $
prefix.
Some media are explaining that <!-- $backgroundColor: #ff8800 -->
can change background color in the whole of slides, but it's not true. $
prefix is just an alias into the unprefixed directive and only for global directives: theme
, style
, and headingDivider
. In fact, $
prefix for local directives is invalid. $backgroundColor
would never affect the view of slide.
The dollar prefix in Marpit's global directive is for keeping compatibility with the old Marp app and reducing some troubles while migration. (We recognize there are some people still cannot move to brand-new Marp from the old app like marp-team/marp-cli#85)
However, it brings Marp user misunderstanding for the new syntax as a fact. We had better discard the old syntax once in a while.
It may give bigger impact than we think, so we should allow to provide escape hatch by defining dollar-prefixed custom directives.
Unlike the other marp-team projects, Marpit is developed by pure JavaScript. At the time starting to develop Marpit, we could not decide to adopt TypeScript.
Marpit has an independent type definiton by .d.ts
file, but it is great to generate it from original source code. In a milestone of next major version, we should consider to move to TypeScript.
How to add the document title for my html slides, so that I can see one title on the browser tab. Especially when the html link is added to favorites, it's useful to find it quickly.
Do you have interested in the future of Marpit? We always think listening opinions from Marp / Marpit community is the best rather than working with our dogmatic decision. We want your feedback for keeping to evolve Marp ecosystem! π¬
Marpit has reached stable v1 in May 2019. And this is a roadmap to the next stable.
Marpit v2 in the future focuses to the enhancement as more universal framework for creating slide deck. We hope to make a basis of extensibility that is applicable not only to Marp ecosystem but also to other popular slide frameworks, reveal.js, WebSlides, and so on.
Perhaps v2 the future version of Marpit would be full-rewritten, but most of features and syntax won't change unlike Marp -> Marp Next.
At first, we have to explain planning to rename project.
Marpit was a coined word named from Marp and "it" suffix, in honor of markdown-it library. However, we found that "marpit" has a violent meaning in Hindi.
Project name is important. We fear that some people are keeping a distance from our project just by the image of name. So we think Marpit should change the name into a word which remind no special meanings.
Marpit is an only project built on JavaScript (ECMAScript) in our mainstream projects. Marpit's type definition is defined in /index.d.ts
but it's hard to maintain together with JS.
Usefullness of TS has already proved in other projects. By moving to TS, developer experience will improve not only for Marpit but also for plugins.
UPDATE: TS migration is going to start from v2 step by step. v2 will allow remaining JS by
allowJs: true
.
For common Marp user, an internal parser is not too important. On the other hand, user that getting annoyed for lacked syntax in CommonMark have to consider using plugin to extend syntax.
Marpit aims to the extensible framework by plugins, and hopes to spread plugin ecosystem. However, unfortunately Marpit v1 plugin by community is hardly created and used yet.
We think currently the support for plugin author is very weak. For example, the specification document of Marpit tokens (AST) has not provided at the moment. In addition, we think restrictions by parser's architecture may make plugin development harder.
v2 will be the best timing if Marpit replaces a parser and specification into a promising.
Currently Marpit v1 is using markdown-it as our base parser. It is working over the years, well-maintained, and easy to extend through plugins.
However, there are some restrictions that come from its architecture:
Nevertheless, using markdown-it parser continuously in Marpit v2 might be OK. Marpit v1's core implementations are very stable, tokens with plain structure are easy to extend, and not required cons shown in above anyway. If the specification is well-documented, it may have no problem for plugin author.
remark (NOT Markdown presentation template) is a modern and popular parser without above restrictions. In fact, some tools that have same purpose of Marp are supporting remark.
VS Code's markdown engine is based on markdown-it. So Marp for VS Code might have to change the logic drastically if Marpit moved to remark.
About MDX, we are taking a dim view because Marp requires only standard knowledges, such as Markdown, HTML, and CSS. However, actually it's popular in some tools so leaving extensibility for MDX makes a value.
That is the question to Marpit plugin author.
Both parsers have pros and cons. We want to hear an opinion from users interested to develop Marpit plugins.
Some internal plugins and classes are dependent on values defined in Marpit
instance, such as lastGlobalDirectives
, lastComments
, lastStyles
etc...
We should get rid of them and change to store values to the context object created within render()
.
"Layer" is new concept available only in inline SVG mode, to make the layout system generalize.
Marpit v1 has advanced backgrounds to apply complex layout with keeping original DOM structure of Markdown (e.g. Multiple backgrounds, Split slides inspired from Deckset, etc...) They features are not changed in v2 too.
A current problem is too complex parse & build process of them. Leaving these logics may make it difficult to maintain.
As the discussion on #137 shows, the idea of layout using inline SVG is profitable. We have no plans to add that as the built-in feature at present, but we want to be making useful layouts become easy to create in plugin.
In v2 future, we will organize layout system for inline SVG as a new concept "Layer", and make easy to manipulate and extend through Marpit plugin.
At first, let's review v1's inline SVG rendering.
# Hello, Marpit!
This Markdown will convert into like this:
<svg data-marpit-svg viewBox="0 0 1280 720">
<foreignObject x="0" y="0" width="1280" height="720">
<section id="1">
<h1>Hello, Marpit!</h1>
</section>
</foreignObject>
</svg>
When Markdown is using background image(s) through ![bg]()
, children of <svg>
element will have a huge change.
![bg](background-image.jpg)
# Hello, Marpit!
<svg data-marpit-svg viewBox="0 0 1280 720">
<foreignObject x="0" y="0" width="1280" height="720">
<section data-marpit-advanced-background="background">
<div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal">
<figure style="background-image: url("background-image.jpg");"></figure>
</div>
</section>
</foreignObject>
<foreignObject x="0" y= "0" width="1280" height="720">
<section id="1" data-marpit-advanced-background="content">
<h1>Hello, Marpit!</h1>
</section>
</foreignObject>
<foreignObject x="0" y="0" width="1280" height="720" data-marpit-advanced-background="pseudo">
<section data-marpit-advanced-background="pseudo"></section>
</foreignObject>
</svg>
Now you can see 3 <foreignObject>
elements: for background images, main contents, and pseudo-layer like pagination defined by section::after
in theme CSS.
They can define the position and size of content declaratively in DOM, so it becomes easy to control layout such as split slides.
In Marpit v2 for the future, we will treat each <foreignObject>
as "Layer" of a slide, and provide interface to add and modify layer contents, position, and stacking orders programatically. (A detailed interface is not defined yet)
Each slide page must have the contents layer for placing original DOM converted from Markdown.
Plugin that provides additional layer will pick required elements from the contents layer, and append them to new layer. For example, advanced background plugin will pick ![bg]()
from the contents layer, and append to the background layer.
In addition, we also have an idea for layers in regular conversion by using nested <section>
.
<section id="1" data-marpit-layer="true">
<!-- Layer for background -->
<aside data-marpit-layer="bg" style="top:0; left:0; width:1280px; height:720px;">
<figure style="background-image: url("background-image.jpg");"></figure>
</aside>
<!-- Contents layer -->
<section style="top:0; left:0; width:1280px; height:720px;">
<h1>Hello, Marpit!</h1>
</section>
</section>
We don't think that can realize immediately because it must consider manipulating theme CSS. But if it was realized, Marpit would grow extensibility to other framework, especially reveal.js. By using additional layer(s), Marpit can generate vertical slides for reveal.js.
# Marpit extensibillity for reveal.js
---
## Vertical slides
***
## with layer
<section id="1">
<h1>Marpit extensibillity for reveal.js</h1>
</section>
<section id="2" data-marpit-layer="true">
<!-- Contents layer -->
<section>
<h2>Vertical slides</h2>
</section>
<!-- Additional layer generated by plugin -->
<section>
<h2>with layer</h2>
</section>
</section>
W3C has the public working draft for cascade layers in CSS cascading and inheritance Lv5. It is not meaning to separate styles for contents and we think it's too early to adopt that, but it has a worth to consider for using to style Marpit theme.
When <video ... flags are used to add a mp4 in slides, and export the md file to html. I find the video player can not display properly in chrome browser.
And Video cannot be automatically paused after you have flipped this page.
Marp for VS Code
Currently the build process about a style of Marpit document (https://marpit.marp.app/) is implemented in an entrance repo of Marp because we had expected to use style in other projects of ours. But we're planning to use Docusaurus at the entrance to build landing page and blog, so we no longer use have to build docsify style in the entrance.
We should be porting the build process of docsify style from marp-team/marp and execute while deploy to Netlify.
UPDATE: Currently Docusaurus team is working toward the next version. It's so awesome due to the plans resolving many cons, but we cannot use Docusaurus 2 now. So we're re-thinking to be going to use Gatsby instead of Docusaurus.
Hi
Putting 'auto' in an image (not background image) to get automatic width doesn't seem to work:
---
marp: true
title: Marp CLI example
description: Hosting Marp slide deck on the web
theme: uncover
paginate: true
_paginate: false
---
![auto](https://www.netlify.com/img/press/logos/logomark.svg)
Is this not the correct way to automatically resize the image ?
Would be nice we could resize the image as percentage of slide width or height also on foreground images.
Are there docs on which keyboard shortcuts exist? I found a bunch of obvious ones for basic forward/back navigation through trial and error but looking for navigate-to-beginning etc.
Marpit can collect HTML comments written within Markdown while parsing and use them as presenter notes. Marp CLI has already supported conversion into PPTX with notes.
However, some comments would obstruct in notes. Prettier's magic comment (such as <!-- prettier-ignore -->
, <!-- prettier-ignore-start -->
, and <!-- prettier-ignore-end -->
) is required to use Marpit's fragmented list because Prettier will format them (*
and 1)
) to regular markers (-
and 1.
). The problem is useless comments are remaining in notes.
We may consider to ignore well-known magic comments while parsing Markdown.
<!-- prettier-ignore -->
<!-- prettier-ignore-start -->
<!-- prettier-ignore-end -->
<!-- markdownlint-disable (...) -->
<!-- markdownlint-enable (...) -->
<!-- markdownlint-capture -->
<!-- markdownlint-restore -->
remark-message-control
)
<!-- lint disable ... -->
<!-- lint enable ... -->
<!-- lint ignore ... -->
β οΈ We only have to consider magic comments provided from the outside tool that may be used together with Marp/Marpit. Additional syntaxes like provided by markdown-it plugin would not consider because they can mark in the plugin, as parsed to prevent collecting.
Is it possible to have elements (text, images etc) to appear in a slide without using fragmented lists? For example I want a image to appear but I don't want a dot beside the image.
Hi, this is maybe not an issue. But it really troubles me as:
$size: 4:3
.Fragmented lists are great! Sometimes, though, I want to display the whole list at once. For example:
Here's my grocery list:
press right arrow
Here's my grocery list
* Milk
* Eggs
This seems to be a special case of being able to explicitly specify which fragments an element is visible for.
I know LaTeX Beamer has something like this. If there's a way to make it happen, I couldn't see it in the docs.
I there a way to center the image on a slide with the new Marpit engine ?
I used to set ![50% center](myimg.png)
but both the percentage and position seem to not work anymore.
Eg:
<!--[if html]>
<video autoplay muted loop class="bg"><source src="video.mp4" type="video/mp4"></video>
<![endif]-->
<!--[if pdf]>
![bg](image.png)
<![endif]-->
Regardless of the description on document, this metadata in the CSS is not recognized and throw error when calling ThemeSet.add()
.
/*! @theme foobar */
The beginning special chars !
is not considered in Marpit PostCSS meta plugin.
Line 18 in 1e18258
We are considering to support video by Markdown image syntax. It could provide better video experiences like Deckset, on the HTML slide deck.
Also refer to yhatt/marp#60.
<!-- Inline video -->
![](video.mp4)
![w:640 h:480](video.ogv)
<!-- Meta keywords -->
![autoplay loop muted](video.mp4)
<!-- Background video (only in advanced background mode) -->
![bg](video.mp4)
![bg 200%](video.mp4)
Basically these would be converted into HTML5 <video>
elements.
![]()
with video extension into <video>
elementwidth
, height
, and syntax for background (keyword and percentage)autoplay
, loop
, muted
(and mute
alias for compatibillity of Deckset)![](https://www.youtube.com/watch?v=ZwzY1o_hB5Y)
(An another issue?)In inline SVG mode, Chromium's rendering bug 467484 will affect to <video>
elements. But it would be fixed by an experimental BGPT feature (--enable-blink-gen-property-trees
).
At first, we designed Marpit theme CSS that is stylable into <html>
and <body>
elements. It meant the theme CSS can use as the plain styling for converted HTML without CSS conversion by Marpit.
However, it will give an unexpected surprise to the application creator that has integrated Marpit. In addition, it might give a chance to insert the malicious code by the attacker.
marpit/src/postcss/pseudo_selector/prepend.js
Lines 20 to 21 in bbe47aa
We would no longer have to give a special treatment to html
and body
.
Hi, I used the example code to make html/css, it compiles and makes a file. But... it does not paginate in Chrome or Safari.
Do I need to implement onepage-scroll or such myself, or is there a style sheet I should use?
Currently, Marpit directives cannot customize by the user. For more extensibility, we are planning that the extended class allows adding custom directives.
For example as the use case, it allows enabling slide preview only by writing marp: true
directive, in Marp plugin for the existing Markdown editor. (VSCode, Atom, and so on)
---
marp: true
---
To implement presenter notes, we are planning that HTML comments whose not to recognize as YAML object for directives will collect and return in the result object of Marpit.render()
.
<!-- theme: test-theme -->
# First page
<!-- This HTML comment is not YAML, so it would be collected. -->
---
## Second page
---
### Third page
<!-- It would be collected per pages. -->
<!-- These are expected to use as presenter note. -->
{
html: '<div class="marpit"><section>...</section></div>',
css: '.marpit > section { ... }',
// Collected comments
comments: [
['This HTML comment is not YAML, so it would be collected.'],
[],
[
'It would collect per pages.',
'These are expected to use as presenter note.',
],
],
}
At first we had planned to implement this feature in marp-core. But to decide a specification of comment in framework-level is better than implementation at inherited class.
Related to yhatt/marp#30.
@import
must precede all other statements excepted@charset
. It follows the original specification.
However, this restriction is gone by #72. @import
could work correctly in anywhere of the CSS root, because we have a roll-up process for @import
and @charset
before convertion. It becomes that @import
and @import-theme
behave almost same behavior while theme conversion.
We have to update documentation to avoid confusion.
Marpit still has supported Node 6 (>=6.14.4), but it will reach to end-of-life soon. In an new release after April, we should consider dropping support for Node 6.
Is it possible to change the color of a specific word?
Thanks
Marpit has internal helper function to be helpful creating Marpit plugin. It's exposed in @marp-team/marpit/markdown/marpit_plugin
and using in some Marp tools but it is private API yet.
https://github.com/marp-team/marpit/blob/master/src/markdown/marpit_plugin.js
We are considering to expose this interface as Marpit.plugin()
static function and named export that can use through export { plugin } from '@marp-team/marpit'
.
Our plugin ecosystem has compatible with markdown-it, but it would be good that there is a better interface to access Marpit internals.
Percentage value such as
width:100%
was not supported caused by a special case of in-place DOM update in Firefox (#62). But certainly I think percentage should be enabled in an inline image too.
Originally posted by @yhatt in #192 (comment)
Hello @yhatt, what is your opinion about adding a percentage to the [bg left]/[bg right] directive? Currently, these split the slide at 50%, but if say we did [bg left w:33%], this would mean that the bg image spans one-third of the slide and the text takes up the remaining two-thirds. Will it be possible to add this by any chance?
PS: Thank you so much for making Marp happen!
We are considering to support type setting for theme metadata specified in the metaType
option in Theme#fromCSS
, , and ThemeSet#add
ThemeSet.metaType
member.
Currently theme metadata only allows a single value. This behavior is very natural because Marpit only requires @theme
metadata.
But in the extended class as like as Marp Core, there may be the meta key want to allow multi-time definitions. Thus, we should accept metaType
option when creating Theme
instance.
It is an object that has a key as the name of metadata and a value as the specified type which of String
or Array
. We will parse meta as String
by default, included undefined meta key. The user has to set Array
if the theme allows multi-time definitions in same meta key.
/**
* @theme example
* @foo Single value
* @foo allows only one string
* @bar Multiple value 1
* @bar Multiple value 2
* @bar Multiple value 3
*/
const themeSet = new ThemeSet()
themeSet.metaType = {
foo: String,
bar: Array,
}
themeSet.add(css)
console.log(themeSet.getThemeMeta('example', 'foo'))
// => 'allows only one string'
console.log(themeSet.getThemeMeta('example', 'bar'))
// => ['Multiple value 1', 'Multiple value 2', 'Multiple value 3']
It requires in proposed marp-team/marp-core#91: The proposed @size
metadata requires multi-time definitions.
/**
* @theme foobar
* @size 4:3 960px 720px
* @size 16:9 1280px 720px
*/
metaType
option value in Theme#fromCSS
metaType
option value in ThemeSet#add
metaType
member in ThemeSet
class to set the default type setting for ThemeSet#add
@theme
metadata as String and disallow changing typeThemeSet#getThemeProp
Array
.ThemeSet#getThemeMeta
to get correct meta value with array supportI was writing a PPT using vscode and I found a little difficult to understand those directives for a beginner like me.Though I can find some clues in documentation like:
paginate | Show page number on the slide if you set true.
header | Specify the content of slide header.
footer | Specify the content of slide footer.
class | Specify HTML class of slideβs
But I didn't find a parameter table or explaination, so it's still hard to use them.
I feel this inconsistency is a bit confusing (actually, I expected inlineSVG
was disabled in other tools).
inlineSVG
seems one of key features in the tools, so I'd recommend to enable it in marpit, too.
(But, I can understand the current design (a framework v.s. tools), so it's okay just to close this issue.)
ThemeSet.pack
can inject string before and after packed CSS. By setting before
option, theme's @charset
and @import
at-rules would not work because of the specification of CSS.
It means that marp-team/marp-core, is using before
option in ThemeSet.pack
, cannot import another theme by @import
rule. We require roll-up at-rules before parsing @import
for theme.
Previous marp was support inserting HTML-code into slide, but now all <
, >
will be replaced to <
, >
.
Is there any option to prevent this behavior?
I was wondering if there is a way to split the canvas in the same way as you can split the slide for background images, i.e. a two-columns layout?
At the moment, this is possible,
<!--Left hand side -->
# Some title
- item
- item
![](https://maybe.another.non-background-image.jpg)
<!--Right hand side -->
![bg right](https://example.com/backgroundB.jpg)
but wouldn't it be nice to be able to split the slides for non-image contents,
<!-- Left column -->
# Left hand side
- item
- item
<!--Right column -->
# Right hand side
- item
- item
or to even vertically split a column to include non-image contents or BG-images only within one column?
<!-- Left column -->
# Left hand side
- item
- item
<!--Right column -->
<!--Right top -->
![bg right-top](https://example.com/backgroundA.jpg)
<!--Right bottom -->
![bg right-bottom](https://example.com/backgroundB.jpg)
If this can not easily be added, I think it would already be very nice if this only works with BG-images.
Maybe this can be realized with additional keywords (e.g., left-top, left-bottom, right-top, right-bottom), like in the example above.
We are considering to add the shorthand for color
spot directive. It looks like #92, but it's working for text color.
They would return the same result:
![](red)
<!-- _color: red -->
I'm using marp through the vscode plugin, and I'd like to enable raw html in my slides to include an HTML table. I tried adding html: true
in the global directives section, but it didn't work. Is there a way to do this?
@keyframes
at-rule in theme CSS is not working by the incorrect element scoping.
/* @theme example */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
Marpit v0.3.1 will convert into:
/* @theme example */
@keyframes spin {
div.marpit > section from { transform: rotate(0deg); }
div.marpit > section to { transform: rotate(360deg); }
}
Marpit is misrecognized from
, to
, and xxx%
as the element.
We are considering to support the fragmented list, to appear the content of lists one by one.
CommonMark provides some markers for building list. The unordered list allows using -
, +
, and *
, and the ordered list allows 1.
and 1)
. We want to parse the less frequency-used marker as the fragmented list, and let it parsable as fragmented in Marpit integrated tools (e.g. Marp Core and integrated apps).
<!-- Regular list -->
- One
- Two
- Three
1. One
2. Two
3. Three
---
<!-- Fragmented list -->
* One
* Two
* Three
1) One
2) Two
3) Three
Currently, Marpit will render a pair of pages with exact same DOM structures by parsing this example.
<section>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
</section>
When using *
or 1)
, Marpit would add data-marpit-fragment
data attribute to the list and show the fragmentation level. The slide container (<section>
) would be added data-marpit-fragments
attribute to store the total fragmentation level of the page.
<section data-marpit-fragments="6">
<ul>
<li data-marpit-fragment="1">One</li>
<li data-marpit-fragment="2">Two</li>
<li data-marpit-fragment="3">Three</li>
</ul>
<ol>
<li data-marpit-fragment="4">One</li>
<li data-marpit-fragment="5">Two</li>
<li data-marpit-fragment="6">Three</li>
</ol>
</section>
It allows parsing data attributes by integrated apps. For example, Marp CLI's bespoke template, using Bespoke.js, can parse and allow one-by-one appearing by using a plugin based on bespoke-bullets.
Current draft is scalable for the other elements, so we don't expect to use bespoke-bullets as is.
Similar requests are reported to yhatt/marp: yhatt/marp#55 and yhatt/marp#257. These suggestions will probably allow any elements as the fragmented target, but it might require to manipulate rendered DOM to wrap by the element whose data-marpit-fragment
in some cases. Marpit hates implicit DOM manipulation because it may break CSS theme, so we focus on the list first. (Resolves yhatt/marp#89)
Marpit is just a wrapper of markdown-it. Thus, currently we always return the converted plain string of HTML.
However, returning as array consisted of each slide pages would help creating more controlled slide page in some cases.
The strong motivation is caused from the note template working in marp-team/marp-cli#52. It has an ugly logic to split string directly, and might break by user's Markdown input.
By default, the content of inline <style>
is appended to the end of theme and would effect to whole of slide deck. It is useful for tweaking current theme, but we thought some people want to apply style only to current page.
Currently it could apply customized section
CSS to single page by the combination with class
spot directive.
<!-- _class: title -->
<style>
section.title h1 {
text-align: center;
}
</style>
# Centered!
---
# Aligned to left
However, this way is a bit verbose. If you don't intend to re-use style, it may nice to be able writing scoped style to current page like this:
<style scoped>
h1 {
text-align: center;
}
</style>
# Centered!
It would convert into scoped HTML and CSS. The scoping target is section
element for slide page.
<section data-marpit-scope-d318a2c1>
<h1>Centered!</h1>
</section>
section[data-marpit-scope-d318a2c1] h1 {
text-align: center;
}
We would have to make it be able to change enable or disable in Marpit constructor. <style scoped>
is already removed from the specification of HTML, and not supported on modern browsers. Nevertheless, this syntax is still favored in Vue component.
Hi! Where can I see the accordance of the markdown directives to CSS elements. I couldn't find it in docs.
I wasn't sure whether this was a marpit or marp-core question, apologies if I got this wrong.
Is there any plan for an include directive that will allow me to have a separate file which will be imported at render-time?
For example:
---
theme: uncover
size: 4:3
---
# This is my first slide
---
<!-- include: static/content.md -->
---
# This will appear after the content contained within the include
This will permit me to use boilerplate text on all slidedecks, and make it much easier if information contained within the text changes, but also for things like church presentations where song words would need to be included in subsequent slidedecks.
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;
}
---
<style>
section {
background: yellow;
}
</style>
Hello world
===
expected to produce
Hello world
only, but got
<style>
section {
background: yellow;
}
</style>
Hello world
Related to yhatt/marp#252.
Marpit is already supported backgroundColor
directive. But when you want to change color in a single page, it requires:
<!-- _backgroundColor: "#def" -->
A suggestion in yhatt/marp#252 is very useful in this case. You may write the color code as like as the background image syntax.
<!-- Color keywords -->
![bg](red)
---
<!-- Hex color -->
![bg](#39ffaf)
It would allow color keywords, transparent
, currentColor
, and RGB colors with hexadecimal notation #123abc
. It has the same behavior to backgroundColor
spot directive.
The functional notation like rgb(0, 128, 255)
might break Markdown (CommonMark) image syntax by whitespace. To support functionals is no problem, but we should tell this problem to user.
Is it possible? I want to have all headers align to left-top.
When defining keyframes for CSS Animations through inline style in Markdown, the author cannot use <style scoped>
. It would emit invalid style like #97 if used.
<style scoped>
@keyframes foobar {
from { width: 123px }
to { width: 456px; }
}
</style>
@keyframes foobar {
section[data-marpit-scope-lYmIl9Fz] from { width: 123px }
section[data-marpit-scope-lYmIl9Fz] to { width: 456px; }
}
I suppose @keyframes
within the scoped style would be better for defining animation in the current slide page, without considering conflict with global animation names.
We can learn the implementation of scoped style from @vue/component-compiler-utils
.
@keyframes
(#236)@keyframes
<style scoped>
in the same page will generate the same identifierI see that currently is possible to define a scoped style for a single slide with #94
this forces us to put CSS in the markdown file, making it less readable.
Since there is already support for custom CSS theme files, it would be great to assign a CSS class to a single slide and move the CSS in the theme file.
Adding a custom class to the section
would be great.
Hello, I love this tool.
Is it possible to skip the title slide and appendix slides in the sum of page counts data-marpit-pagination-total
? And how can I do so?
the pagination style of my css thema is this:
section::after {
font-size: 1.1em;
content: attr(data-marpit-pagination) ' / ' attr(data-marpit-pagination-total);
}
And I wrote <!-- paginate: false -->
at the title slide and <!-- paginate: true -->
at the second slide, so the second slide' s pagination was "2/10." I want to change it to "1/9."
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.