repository·main·Indexed 23 days ago
https://github.com/marp-team/marpitA lightweight Markdown slide deck framework that transforms Markdown and CSS into static HTML/CSS slide decks. Marpit serves as the core engine for the Marp ecosystem, featuring a CSS-based theming system, specialized slide syntax via directives, and extensibility through a markdown-it compatible plugin interface. It supports global and local directives for controlling slide properties, pagination, and backgrounds, as well as experimental inline SVG slides for pixel-perfect scaling.
Marpit is a lightweight Markdown slide deck framework designed to transform Markdown and CSS themes into a slide deck composed of static HTML and CSS. The resulting output is a web page that can be converted into a slide PDF via printing.
Marpit is intended to be used as a base framework for other tools and applications, specifically serving as the core converter for the Marp ecosystem. It focuses on outputting minimum assets for the slide deck.
Marpit provides several key capabilities for slide creation:
markdown-it parser that supports features like Directives and Slide backgrounds.<svg> elements as slide containers for pixel-perfect scaling via CSS and advanced backgrounds using <foreignObject> while maintaining the Markdown DOM structure.Beyond standard Markdown, Marpit provides several extended syntaxes to enhance slide creation:
 syntax designed for better slide layout and styling.In Marpit, the :root pseudo-class selector targets the <section> element of each slide page rather than the <html> element.
Using :root is functionally similar to using section, but :root has higher CSS specificity. If both are used in a theme, declarations in :root will take precedence.
Additionally, rem units used within :root or section will automatically resolve to relative values based on the parent <section> element, ensuring consistent scaling regardless of the host document's font size.
/* @theme marpit-theme */
:root {
width: 1280px;
height: 960px;
font-size: 40px;
padding: 1rem;
}
h1 {
font-size: 1.5rem;
color: #09c;
}
h2 {
font-size: 1.25rem;
}Marpit renders fragmented lists using standard HTML list structures but injects specific data-marpit-* attributes for fragment handling.
<section> element: Adds data-marpit-fragments="N" where N is the total number of fragmented items on that slide.<li> element: Adds data-marpit-fragment="N" where N is the sequential index of the fragment (starting from 1).Fragmented lists do not change the DOM structure or appearance by themselves; they rely on the integrated application (e.g., a Marp presentation viewer) to interpret these attributes and implement the step-by-step visibility behavior.
<section id="2" data-marpit-fragments="3">
<h1>Fragmented list</h1>
<ul>
<li data-marpit-fragment="1">One</li>
<li data-marpit-fragment="2">Two</li>
<li data-marpit-fragment="3">Three</li>
</ul>
</section>The inlineSVG mode provides several architectural advantages for presentation engines:
<foreignObject>.scroll-snap-align on <section> elements, slides can align to the viewport using CSS Scroll Snap, allowing for minimal, logic-less web presentations.<foreignObject> layer. This prevents background elements from breaking CSS selectors like :first-child or the adjacent sibling combinator (+) within the Markdown DOM structure.markdown-it. If you want to manipulate the result of Markdown rendering, you should follow the standard markdown-it plugin architecture. For detailed information on how to manipulate rendering results, refer to the official markdown-it documentation.Marpit extends the markdown-it parser to support specialized slide syntax, including:
The syntax is designed to maintain compatibility with general Markdown documents.
Marpit collects HTML comments (that are not Marpit directives) during rendering. These are returned in the comments property of the object returned by marpit.render().
The comments value is a two-dimensional array where each inner array contains the comments found on a specific slide page.
Directives are categorized by their scope:
These settings apply to the entire slide deck. If the same global directive is defined multiple times, Marpit only recognizes the last value.
These settings apply to the defined page and all following pages.
<!-- backgroundColor: aqua -->
This page has aqua background.
---
The second page also has same color.To apply a local directive to only the current page, prefix the directive name with an underscore (_).
<!-- _backgroundColor: aqua -->
Add underscore prefix `_` to the name of local directives.
---
The second page would not apply setting of directives.<!-- _backgroundColor: aqua -->Marpit optionally supports using the <svg> element as the container for each slide page. This approach allows for:
<foreignObject> to provide backgrounds while preserving the original Markdown DOM structure.