返回 marp
202205-ecosystem-update.md
根目录 / website / blog / 202205-ecosystem-update.md
1 ---
2 title: 'Ecosystem update: Marp Core v3 & Slide transitions in CLI v2'
3 date: 2022-05-26
4 description: Introduce a stable release of Marp Core v3, and updated CLI v2 with an entirely new slide transition experiment.
5 author: Yuki Hattori
6 github: yhatt
7 image: /og-images/202205-ecosystem-update.jpg
8 ---
9
10 We are so excited to introduce a stable release of **[Marp Core](https://github.com/marp-team/marp-core) v3**, and **[Marp CLI](https://github.com/marp-team/marp-cli) v2** update with [an entirely new slide transition experiment](#slide-transition-experiment).
11
12 - **[Marp Core v3](#marp-core-v3)**: MathJax rendering as default, updated `default` theme, and new components for auto-scaling.
13 - **[Marp CLI v2](#marp-cli-v2)**: Bundled core v3, and [brand-new slide transition experiment](#slide-transition-experiment) with 33 built-in effects + CSS custom transitions.
14
15 <!-- more -->
16
17 # Marp Core v3
18
19 [We had released Marp Core v3.0.0 as a release candidate in November 2021.](https://github.com/marp-team/marp-core/releases/tag/v3.0.0) For a half year, it had been available in the `next` tag as an opt-in engine of Marp CLI, and had accepted feedback from the community.
20
21 This month [v3.2.0](https://github.com/marp-team/marp-core/releases/tag/v3.2.0) has become a stable release, and **we are starting work to make v3 core the default in downstream Marp tools gradually.**
22
23 An updated Marp Core v3 has some major changes, but we also have worked to keep backward compatibility in many existing slides. Most slide authors should not be concerned about regressions as long as your tweaks to the slide theme are not complicated.
24
25 If you are a theme author, you may have to modify some of the styles. This update includes a brand-new auto scaling component, the change of `default` theme caused by the update of [`github-markdown-css`](https://github.com/sindresorhus/github-markdown-css), and so on.
26
27 Even so, you should not too worry: We worked to v3 core to reduce friction between Marp's CSS and common CSS, so I think the complex part of our theming system (e.g. styling auto-scaled element) must be easier to understand than v2.
28
29 ## Notable changes
30
31 ### Drop support for End-of-Life Node.js
32
33 First, Marp Core v3 has dropped support for end-of-life Node.js 10.
34
35 We have supported EoL Node.js v12 yet, but continuous support may not guarantee depending on the support status of dependency modules. We recommend following up on [the active LTS Node.js](https://nodejs.org/).
36
37 > Check out https://endoflife.date/nodejs to know which version of Node.js is EoL.
38
39 ### MathJax is a default typesetting library for math
40
41 [katex]: https://katex.org/
42 [mathjax]: https://www.mathjax.org/
43
44 Marp Core v3 has changed the default library for rendering math, from [KaTeX] to [MathJax].
45
46 Marp had used [KaTeX] as a default library for long years for taking better performance. But currently, this opinion has become the past thinking with the advent of MathJax 3. [See this interesting insight.](https://groups.google.com/g/mathjax-users/c/aboJLMb50uQ/m/Y77FexF_AwAJ)
47
48 And some incompatibilities of KaTeX with Marp Core's auto scaling feature that are hard to fix had given us a headache. ([marp-team/marp-core#159](https://github.com/marp-team/marp-core/issues/159), [marp-team/marp-core#236](https://github.com/marp-team/marp-core/issues/236))
49
50 MathJax implementation in Marp Core has more reliable rendering than KaTeX. In addition, it also has more TeX function supports, and no network is required to show.
51
52 Now a lot of Markdown flavors have adopted MathJax for math typesetting (e.g. [GitHub](https://github.blog/2022-05-19-math-support-in-markdown/)), and we expect Marp Markdown would get higher compatibility in several Markdown services.
53
54 #### `math` global directive
55
56 If your Markdown is not yet ready to migrate math typesettings into MathJax, you can continue to use KaTeX as a math typesetting library by setting [`math` global directive](https://github.com/marp-team/marp-core#math-global-directive) as `katex`.
57
58 ```markdown
59 ---
60 math: katex
61 ---
62
63 Continue to use KaTeX: $ax^2+bc+c$
64 ```
65
66 We have no plans to remove KaTeX integration for a while. So you can keep rendering math with KaTeX if you're using KaTeX specific syntaxes or met rendering performance issues in MathJax.
67
68 > For smooth migration of exist slides to v3, Marp for VS Code is [annotating to math use without `math` global directive](https://github.com/marp-team/marp-vscode#diagnostics) since a year ago.
69
70 ### Renewed auto-scaling component
71
72 Marp Core has a tiny runtime script to activate element auto-scaling for a code block, math block, and [fitting header `# <!--fit--> header`](https://github.com/marp-team/marp-core#fitting-header). v3 has updated auto scaling logic into [Web Components](https://developer.mozilla.org/docs/Web/Web_Components) based, to improve output lucidity and compatibility with some CSS selectors.
73
74 This update does not change the actual auto-scaling behavior from v2, so most Markdown slide authors should not need to take care of that. But if you have a custom theme that was styled to auto-scaling elements, you should review and modify CSS declarations in your theme to match with v3.
75
76 Please refer to the pull request **[marp-team/marp-core#263](https://github.com/marp-team/marp-core/pull/263)** for details of auto-scaling components.
77
78 ### Updated `default` theme
79
80 To provide a familiar Markdown style to users as default, Marp Core `default` theme is based on [GitHub's Markdown CSS](https://github.com/sindresorhus/github-markdown-css).
81
82 The latest Marp Core has included the following updates about `default` theme:
83
84 - Updated color schemes based on the latest [github-markdown-css v5](https://github.com/sindresorhus/github-markdown-css)
85 - Match colors for code highlight with GitHub style
86 - Allow color customization through CSS variables ([See theme docs](https://github.com/marp-team/marp-core/tree/main/themes#custom-color-css-variables))
87
88 ````markdown:marp
89 <!-- paginate: true -->
90 <style>:root { font-size: 40px; }</style>
91
92 # This is a new `default` theme
93
94 ```markdown
95 <!-- theme: default -->
96
97 # This is a new `default` theme
98 ```
99
100 ---
101
102 <!-- class: invert -->
103
104 # Updated `invert` color scheme
105
106 based on GitHub dark mode
107
108 ```markdown
109 <!-- class: invert -->
110 ```
111
112 ````
113
114 ### URL without HTTP(S) scheme does no longer auto-linkify
115
116 Marp Core up to v2 had detected URL-like strings and converted them to hyperlinks automatically. However, that was too fuzzy and often brought linkify in not intended words, such as "[Amazon.com](https://amazon.com/)" and "[ML.NET](https://dotnet.microsoft.com/apps/machinelearning-ai/ml-dotnet)".
117
118 But there are no more fuzzy links in v3! Now auto link feature requires the URL string with `https://` or `http://` scheme.
119
120 Please make a Markdown link `[Amazon.com](https://amazon.com/)` explicitly if you want the hyperlink in previously auto-linked words.
121
122 # Marp CLI v2
123
124 According to the time to become core v3 stable, we also worked on **[a major update of Marp CLI](https://github.com/marp-team/marp-cli/releases/tag/v2.0.0)** to bundle a new core.
125
126 There are no major changes in the general use of Marp CLI, and I believe your CLI workflow would never break by this update in most cases.
127
128 So what feature is a "major" update of CLI? [_Perhaps you may have interested in a hidden gem..._ 💎](#slide-transition-experiment)
129
130 ## Notable changes
131
132 ### Required Node.js v14 and later
133
134 The new release of Marp CLI is required **the latest Node.js v14 and later**, because depending modules such as Puppeteer (for PDF/PPTX generation) were dropped support for EoL Node.js versions v12 and older.
135
136 ### Bundled Marp Core v3
137
138 As described earlier, Marp CLI v2 has bundled an updated Marp Core v3.2.0 as a core engine.
139
140 ```bash
141 $ marp --version
142 @marp-team/marp-cli v2.0.0 (w/ @marp-team/marp-core v3.2.0)
143 ```
144
145 ###### Continue to use v2 core in Marp CLI
146
147 We recommend getting ready for using the updated v3 core, but Marp CLI also can stick to the v2 core by installing `@marp-team/marp-core@^2` to your project individually.
148
149 ```bash
150 npm i --save-dev @marp-team/marp-cli @marp-team/marp-core@^2
151 npx marp ./your-markdown.md
152 ```
153
154 It's useful when your Markdown slide files are not ready for v3 core. But please keep in mind we would hardly provide more updates to v2 core, and **continuous use may bring a risk of unpatched security issues.**
155
156 # Slide transitions
157
158 A really loving part of this CLI update for me is **[a brand-new slide transition in `bespoke` HTML template.](https://github.com/marp-team/marp-cli/issues/447)**
159
160 We had started testing experimental slide transition effects since [Marp CLI v1.4.0](https://github.com/marp-team/marp-cli/releases/tag/v1.4.0) (Aug 2021). `--bespoke.transition` CLI option had been working well, but not so practical compared to the common presentation tools.
161
162 As a result of catching up on the new spec of [View Transitions API proposal][view transitions api] in Marp CLI v2, I'm so excited to provide powerful transition features that are in no other Markdown slide tools, such as CSS custom transition effects and morphing animations!
163
164 [view transitions api]: https://www.w3.org/TR/css-view-transitions-1/
165
166 > The slide transitions feature has made stable in v2.4.0. You can dive into all about of transitions at [the documentation of Marp CLI transitions][transition-docs].
167
168 [transition-docs]: https://github.com/marp-team/marp-cli/blob/main/docs/bespoke-transitions/README.md
169
170 ## Quick look
171
172 ![Marp CLI transition showcase poster=/assets/202205-ecosystem-update/transition-showcase-poster.jpg controls](https://user-images.githubusercontent.com/3993388/169697466-283dd2f2-b6e5-4b33-86d4-b10cc0a6c3e9.mp4)
173
174 - **[33 built-in transitions](https://github.com/marp-team/marp-cli/blob/main/docs/bespoke-transitions/README.md#built-in-transitions)**: Marp CLI provides a lot of transition effects out of the box.
175 - **[Define custom transitions via CSS](https://github.com/marp-team/marp-cli/blob/main/docs/bespoke-transitions/README.md#custom-transitions)**: Markdown author and theme designer can define the custom transition through `@keyframes` declaration in CSS.
176 - **[Morphing animations](https://github.com/marp-team/marp-cli/blob/main/docs/bespoke-transitions/README.md#morphing-animations)**: [`view-transition-name` CSS property](https://www.w3.org/TR/css-view-transitions-1/#view-transition-name-prop) supplied by View Transition API helps to make morphing animation while transition.
177
178 ## Usage
179
180 The slide transitions in HTML output can opt in and out through `--bespoke.transition` CLI option. _It is only working in the browser that supports [View Transitions API], such as Chrome/Chromium 110 and later._
181
182 The `--preview` CLI option is helpful see transition effects surely. Try this in Marp CLI v2.4.0+ to open a preview window for the transition showcase:
183
184 ```bash
185 curl -o ./showcase.md https://gist.githubusercontent.com/yhatt/d9e86ee53eb8816aaf9c996e773b6f82/raw/transition-showcase.md
186 marp --preview ./showcase.md
187 ```
188
189 ## Showcase
190
191 You can see online demo slides about Marp CLI brand new transitions! See them in the browser that supports [View Transitions API].
192
193 - **[Marp CLI page transition showcase](https://marp-cli-page-transitions.glitch.me/)**: The showcase of built-in transitions
194 - **[Custom transitions example](https://marp-cli-page-transitions.glitch.me/custom.html)**: Some examples and ideas about custom transitions
195 - **[Transition with morphing animation](https://marp-cli-page-transitions.glitch.me/morph.html)**: An example of morphing animation powered by [View Transitions API].
196
197 ## `transition` local directive
198
199 You can set and change the kind of transition through `transition` local directive.
200
201 ```markdown
202 ---
203 transition: fade
204 ---
205
206 Fade transition with 0.5s duration
207
208 ---
209
210 <!-- transition: cover 1s -->
211
212 Changed the kind of transition to `cover` with 1s duration
213
214 ---
215
216 <!-- _transition: none -->
217
218 Disabled transition for this slide
219
220 ---
221
222 Got back to cover transition
223 ```
224
225 Each transition has a default 0.5s duration, but you can also set custom duration by space-separated value such as `<!-- transition: fade 1s -->`.
226
227 ## Custom transition
228
229 The custom transition can define through just a few conventional [`@keyframes` at-rules](https://developer.mozilla.org/docs/Web/CSS/@keyframes) within the inline `<style>` element or custom theme CSS.
230
231 <!-- prettier-ignore-start -->
232
233 ```css
234 /* Simple definition: "dissolve" custom transition */
235 @keyframes marp-transition-dissolve {
236 from { opacity: 1; }
237 to { opacity: 0; }
238 }
239
240 /* Splitted definitions: "triangle" custom transition */
241 @keyframes marp-incoming-transition-triangle {
242 from { clip-path: polygon(0% 0%, 0% 0%, 0% 0%); }
243 to { clip-path: polygon(0% 0%, 200% 0%, 0% 200%); }
244 }
245 @keyframes marp-incoming-transition-backward-triangle {
246 from { clip-path: polygon(100% 100%, 100% 100%, 100% 100%); }
247 to { clip-path: polygon(-100% 100%, 100% -100%, 100% 100%); }
248 }
249
250 /* With backward animations: Overloading "zoom" transition */
251 @keyframes marp-incoming-transition-zoom {
252 from { transform: scale(0); }
253 to { transform: scale(1); }
254 }
255 @keyframes marp-outgoing-transition-backward-zoom {
256 from { transform: scale(1); }
257 to { transform: scale(0); }
258 }
259 @keyframes marp-incoming-transition-backward-zoom {
260 /* Define empty keyframes to disable fallback into incoming animation */
261 }
262 ```
263
264 <!-- prettier-ignore-end -->
265
266 It only has a relatively simple definition(s) but great flexibility, and brings out boundless creativity of CSS animation! 🤩
267
268 **[👉 Marp CLI: How to make custom transition](/blog/how-to-make-custom-transition)**
269
270 We are really looking forward to what creative transition effects our community will create!
271
272 ## Morphing animations
273
274 Thanks to the browser's [View Transitions API], we can apply morphing animations during a transition effect. This is similar to PowerPoint Morph and Keynote Magic Move.
275
276 Just sprinkle a few CSS properties!
277
278 ![Morphing animations](https://raw.githubusercontent.com/marp-team/marp-cli/main/docs/bespoke-transitions/images/morphing-animation.gif ' ')
279
280 ```markdown
281 ---
282 theme: gaia
283 transition: fade
284 style: |
285 /* ⬇️ Mark the image of "1" in every pages as morphable image named as "one" ⬇️ */
286 img[alt="1"] {
287 view-transition-name: one;
288 contain: layout;
289 }
290
291 /* Generic image styling for number icons */
292 img:is([alt="1"], [alt="2"], [alt="3"]) {
293 height: 64px;
294 position: relative;
295 top: -0.1em;
296 vertical-align: middle;
297 width: 64px;
298 }
299 ---
300
301 # Today's topics
302
303 - ![1](https://icongr.am/material/numeric-1-circle.svg?color=666666) Introduction
304 - ![2](https://icongr.am/material/numeric-2-circle.svg?color=666666) Features
305 - ![3](https://icongr.am/material/numeric-3-circle.svg?color=666666) Conclusion
306
307 ---
308
309 <!-- _class: lead -->
310
311 ![1 w:256 h:256](https://icongr.am/material/numeric-1-circle.svg?color=ff9900)
312
313 # Introduction
314
315 ---
316
317 # ![1](https://icongr.am/material/numeric-1-circle.svg?color=666666) Introduction
318
319 Marp is an open-sourced Markdown presentation ecosystem.
320 ```
321
322 **[👉 See details at the documentation about transitions on Marp CLI repository...](https://github.com/marp-team/marp-cli/blob/main/docs/bespoke-transitions/README.md#morphing-animations)**
323
324 # Deprecations
325
326 Finally, we have to mention that the latest update has a deprecated Markdown syntax in the Marp ecosystem. It is still can use for now with deprecation warnings and will be obsolete in future Marp tools.
327
328 > We have planned to work on [an auto-fixable diagnostic for VS Code extension](https://github.com/marp-team/marp-vscode#diagnostics), to make it easier to update the use of deprecated syntaxes.
329
330 ### Shorthand for setting colors (Marpit framework)
331
332 [Marpit framework](https://marpit.marp.app/) had been provided the color setting shorthand through Markdown image syntax, such as `![](red)` and `![bg](yellow)`. This syntax had been allowed to set a corresponding color style like `color: red` and `background-color: yellow` to only a current slide page.
333
334 These are rarely used in reality, and now we have considered as harmful from the point of view of Markdown (CommonMark) compatibility.
335
336 Marpit framework has already provided [`color` / `backgroundColor` local directives](https://marpit.marp.app/directives?id=backgrounds), and setting [scoped local directives](https://marpit.marp.app/directives?id=apply-to-a-single-page-spot-directives) to the slide will bring the same result.
337
338 If you are using these shorthands for setting colors, please replace them with the alternative scoped local directive.
339
340 | Shorthands | Should replace to |
341 | :----------: | :------------------------------: |
342 | `![](red)` | `<!-- _color: red -->` |
343 | `![bg](red)` | `<!-- _backgroundColor: red -->` |
344
345 > _Track the state of progress at [marp-team/marpit#331](https://github.com/marp-team/marpit/issues/331)._
346
347 # Community
348
349 Join the Marp community! Our [GitHub Discussions](https://github.com/orgs/marp-team/discussions) is a community forum that gathered discussions all about Marp, and allows you to connect with Marp team and other Marp users. Of course, we welcome your feedback for this ecosystem update too. 😀
350
351 - [**Go to GitHub Discussions**](https://github.com/orgs/marp-team/discussions)
352 - [The support guideline of Marp project](https://github.com/marp-team/.github/blob/master/SUPPORT.md)
353
354 <!--
355 # Titbit
356
357 Marpit framework is 5th year and I feel that is beginning to gather a few of dust. Therefore I'm trying to design a new polished engine, as a personal weekend experiment toward the next core v4.
358
359 Currently I don't want you too to count on it. I'm just working on for getting a long-lived ecosystem with modern CSS rules :)
360 -->
361
361 lines MARKDOWN