repository·main·Indexed 11 days ago
https://github.com/marp-team/marpA Markdown-based presentation ecosystem for creating professional slide decks. The ecosystem includes Marpit (a lightweight framework), Marp Core (the core converter with built-in themes), Marp CLI (a command-line tool for exporting to HTML, PDF, PPTX, and images), and an extension for VS Code. Key features include support for MathJax and KaTeX, custom CSS transitions via the View Transitions API in Marp CLI v2, and theme customization.
Marp Web is a web-based interface for writing Marp presentations. It is designed as a Progressive Web App (PWA), meaning:
When creating custom transitions, animations might behave incorrectly during backward navigation (e.g., sliding in the wrong direction). You can solve this using two methods:
--marp-transition-direction CSS variable: This variable is available within @keyframes. It evaluates to 1 for forward navigation and -1 for backward navigation. Use calc() to adjust positions based on this value.backward- prefix in your @keyframes name (e.g., marp-incoming-transition-backward-name). Marp will prioritize these keyframes during backward navigation and fall back to the standard ones if the backward version is not defined. To prevent unintended fallback, you can declare an empty @keyframes for the backward version./* Method 1: Using the direction variable */
@keyframes marp-outgoing-transition-slide-up {
from { transform: translateY(0%); }
to { transform: translateY(calc(var(--marp-transition-direction, 1) * -100%)); }
}
/* Method 2: Using the backward prefix */
@keyframes marp-incoming-transition-triangle {
from { clip-path: polygon(0% 0%, 0% 0%, 0% 0%); }
to { clip-path: polygon(0% 0%, 200% 0%, 0% 200%); }
}
@keyframes marp-incoming-transition-backward-triangle {
from { clip-path: polygon(100% 100%, 100% 100%, 100% 100%); }
to { clip-path: polygon(-100% 100%, 100% -100%, 100% 100%); }
}Custom transitions can be defined by adding @keyframes at-rules within an inline <style> element or a custom theme's CSS.
To create a custom transition named my-custom-name, you must define the corresponding Marp-specific keyframe names:
marp-incoming-transition-my-custom-name (for the entrance animation)marp-outgoing-transition-my-custom-name (for the exit animation, optional)marp-incoming-transition-backward-my-custom-name (for backward navigation, optional)marp-outgoing-transition-backward-my-custom-name (for backward navigation, optional)This allows for complex, creative CSS animations to be used as slide transitions.
/* Simple definition: "dissolve" custom transition */
@keyframes marp-transition-dissolve {
from { opacity: 1; }
to { opacity: 0; }
}
/* Splitted definitions: "triangle" custom transition */
@keyframes marp-incoming-transition-triangle {
from { clip-path: polygon(0% 0%, 0% 0%, 0% 0%); }
to { clip-path: polygon(0% 0%, 200% 0%, 0% 200%); }
}
@keyframes marp-incoming-transition-backward-triangle {
from { clip-path: polygon(100% 100%, 100% 100%, 100% 100%); }
to { clip-path: polygon(-100% 100%, 100% -100%, 100% 100%); }
}Fragmented lists (also known as incremental lists or builds) allow list content to appear incrementally during a presentation.
bespoke is required to reproduce the fragmented list as a build animation.Marp (Markdown Presentation Ecosystem) is a system for creating presentations using Markdown. It is built on several core principles:
markdown-it plugins, custom directives, or custom theme sets).The Marp ecosystem is split into different packages depending on whether you need a framework, a CLI, or an editor extension:
Marp for VS Code supports VS Code's Workspace Trust security model. If you are working in an untrusted workspace, only basic Marp features are available (Markdown preview and IntelliSense).
To use advanced features, you must trust the workspace. The following features are restricted in untrusted workspaces:
markdown.marp.themes setting.markdown.marp.enableHtml setting.Marp is based on CommonMark but includes several extensions and specific behaviors:
<br /> tags.<br /> tag for explicit line breaks (e.g., inside a fitting header).markdown-it-emoji and twemoji.~~text~~ to strike through text.highlight.js.* and 1) have special meanings for creating fragmented lists.Marp implements slide transitions by treating the current slide and the next slide as two separate layers presented simultaneously. To create a smooth effect, you must follow two principles:
When navigating, Marp's bespoke HTML template creates these two layers and applies the appropriate CSS animation keyframes to each.
When using KaTeX, standard \def macros are local to the specific math environment (the current block). To define a macro that persists and can be used in subsequent math environments throughout the Markdown document, use \gdef (\global\def).
$$
% macroA is local to this block
\def\macroA{{\color{red}A}}
% macroB is global
\gdef\macroB{{\color{blue}B}}
\macroA + \macroB
$$
---
$$
% macroA will not work here, but macroB will
\macroA + \macroB
$$By default, most HTML tags are disabled for security reasons. Marp only allows two specific tags out of the box:
<style>: Used for tweaking the current theme.<br />: Used for line breaks.If you need to use other HTML tags, you must explicitly opt-in via the specific Marp tool or CLI configuration you are using.