Merge pull request #382 from marp-team/v4-theme-display-block

Update display style of built-in themes container

CHANGELOG.md

@@ -2,9 +2,35 @@
 
 ## [Unreleased]
 
+> [!IMPORTANT]
+> The new slide container styles, `block` container and safe centering, produce breaking changes to existing slide layouts. ([#382](https://github.com/marp-team/marp-core/pull/382))
+>
+> If you are using the built-in theme that contents are vertically centered (or the custom theme that depends on such themes), you can tweak the style in Markdown or the custom theme to get back the previous `flex` container.
+>
+> - For `default` and `uncover` theme:
+>
+>   ```html
+>   <style>
+>     section {
+>       display: flex;
+>     }
+>   </style>
+>   ```
+>
+> - For `gaia` theme's `lead` class:
+>
+>   ```html
+>   <style>
+>     section.lead {
+>       display: flex;
+>     }
+>   </style>
+>   ```
+
 ### Breaking
 
-- Drop support against end-of-lifed Node.js versions (v16 and earlier) ([#359](https://github.com/marp-team/marp-core/pull/359))
+- Drop support against end-of-lifed Node.js versions (v16 and earlier), and now v18+ are required ([#359](https://github.com/marp-team/marp-core/pull/359))
+- The slide container of built-in themes became the block element and adopted safe centering ([#382](https://github.com/marp-team/marp-core/pull/382))
 
 ### Added
 
@@ -17,7 +43,7 @@
   - Support for CSS nesting (`cssNesting` constructor option)
 - Use simpler CSS minification when `minifyCSS` option is enabled ([#381](https://github.com/marp-team/marp-core/pull/381))
 
-* Upgrade development Node.js to v18 LTS ([#359](https://github.com/marp-team/marp-core/pull/359))
+* Upgrade development Node.js to v20 LTS ([#359](https://github.com/marp-team/marp-core/pull/359))
 * Upgrade dependent packages to the latest version ([#380](https://github.com/marp-team/marp-core/pull/380))
 * Switch package manager from yarn to npm ([#379](https://github.com/marp-team/marp-core/pull/379))
 

README.md

@@ -88,7 +88,7 @@ Theme author does not have to worry an unintended design being used with unexpec
 
 ### Emoji support
 
-Emoji shortcode (like `:smile:`) and Unicode emoji 😄 will convert into the SVG vector image provided by [twemoji](https://github.com/twitter/twemoji) <img src="https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f604.svg" alt="😄" width="16" height="16" />. It could render emoji with high resolution.
+Emoji shortcode (like `:smile:`) and Unicode emoji 😄 will convert into the SVG vector image provided by [twemoji](https://github.com/jdecked/twemoji) <img src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets/svg/1f604.svg" alt="😄" width="16" height="16" />. It could render emoji with high resolution.
 
 ---
 
@@ -152,7 +152,8 @@ $$
 
 If not declared, Marp Core will use MathJax to render math. But we recommend to declare the library whenever to use math typesetting.
 
-> :warning: The declaration of math library is given priority over [`math` JS constructor option](#math-constructor-option), but you cannot turn on again via `math` global directive if disabled math typesetting by the constructor.
+> [!WARNING]
+> The declaration of math library is given priority over [`math` JS constructor option](#math-constructor-option), but you cannot turn on again via `math` global directive if disabled math typesetting by the constructor.
 
 ---
 
@@ -176,7 +177,8 @@ All of [Marp Core's built-in themes][themes] are ready to use full-featured auto
 
 This feature depends to inline SVG, so note that it will not working if disabled [Marpit's `inlineSVG` mode](https://github.com/marp-team/marpit#inline-svg-slide-experimental) by setting `inlineSVG: false` in constructor option.
 
-> :warning: Auto-scaling is designed for horizontal scaling. In vertical, the scaled element still may stick out from top and bottom of slide if there are a lot of contents around it.
+> [!WARNING]
+> Auto-scaling is designed for horizontal scaling. In vertical, the scaled element still may stick out from bottom of slide if there are a lot of contents around it.
 
 #### Fitting header
 
@@ -197,15 +199,18 @@ Some of blocks will be shrunk to fit onto the slide. It is useful preventing stu
 |    **Code block**    | ![Traditional rendering](https://bit.ly/2LyEnmi) | ![Auto-scaling](https://bit.ly/2N4yWQZ) |
 | **KaTeX math block** | ![Traditional rendering](https://bit.ly/2NXoHuW) | ![Auto-scaling](https://bit.ly/2M6LyCk) |
 
-> :information_source: MathJax math block will always be scaled without even setting `@auto-scaling` metadata.
+> [!NOTE]
+> MathJax math block will always be scaled without even setting `@auto-scaling` metadata.
 
 ---
 
 ## Constructor options
 
 You can customize a behavior of Marp parser by passing an options object to the constructor. You can also pass together with [Marpit constructor options](https://marpit-api.marp.app/marpit#Marpit).
 
-> :information_source: [Marpit's `markdown` option](https://marpit-api.marp.app/marpit#Marpit) is accepted only object options because of always using CommonMark.
+> [!NOTE]
+>
+> [Marpit's `markdown` option](https://marpit-api.marp.app/marpit#Marpit) is accepted only object options because of always using CommonMark.
 
 ```javascript
 const marp = new Marp({
@@ -262,6 +267,7 @@ By passing `object`, you can set the allowlist to specify allowed tags and attri
 
 Marp core allows only `<br>` tag by default. That is defined in [a readonly `html` member in `Marp` class](https://github.com/marp-team/marp-core/blob/38fb33680c5837f9c48d8a88ac94b9f0862ab6c7/src/marp.ts#L34).
 
+> [!NOTE]
 > Whatever any option is selected, `<!-- HTML comment -->` and `<style>` tags are always parsed by Marpit for directives / tweaking style.
 
 ### `emoji`: _`object`_
@@ -334,6 +340,7 @@ You can control details of behavior by passing `object`.
 
   Assigning the custom post-process function is also helpful to append the custom prefix and suffix to the generated slug: `` (slug, i) => `prefix:${slug}:${i}` ``
 
+> [!NOTE]
 > Take care not to confuse Marp Core's `slug` option and [Marpit's `anchor` option](https://marpit-api.marp.app/marpit#:~:text=Description-,anchor,-boolean%20%7C%20Marpit). `slug` is for the Markdown headings, and `anchor` is for the slide elements.
 >
 > `Marp` class is extended from `Marpit` class so you can customize both options in the constructor. To fully disable auto-generated `id` attribute, set both options as `false`. (This is important to avoid breaking your Web application by user's Markdown contents)

themes/default.scss

@@ -193,15 +193,17 @@ section {
   --heading-strong-color: #48c;
   --paginate-color: #777;
 
-  align-items: stretch;
-  display: flex;
-  flex-flow: column nowrap;
+  display: block;
+  place-content: safe center center;
   font-size: 29px;
   height: 720px;
-  justify-content: center;
   padding: 78.5px;
   width: 1280px;
 
+  /* Definitions for classic bhavior: Users can adopt flex centering by tweaking style `section { display: flex }` */
+  flex-flow: column nowrap;
+  align-items: stretch;
+
   &:where(.invert) {
     --h1-color: #cee7ff;
     --header-footer-color: #{rgba(#999, 0.75)};

themes/gaia.scss

@@ -281,9 +281,11 @@ section {
   }
 
   &:where(.lead) {
-    display: flex;
+    place-content: safe center center;
+
+    /* Definitions for classic bhavior: Users can adopt flex centering by tweaking style `section.lead { display: flex }` */
     flex-flow: column nowrap;
-    justify-content: center;
+    align-items: stretch;
 
     h1,
     h2,

themes/uncover.scss

@@ -28,13 +28,12 @@ section {
 
   background: var(--color-background);
   color: var(--color-foreground);
-  display: flex;
-  flex-flow: column nowrap;
+  display: block;
+  place-content: safe center center;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   font-size: 40px;
   height: 720px;
-  justify-content: center;
   letter-spacing: 3px;
   line-height: 1.4;
   padding: 30px 70px;
@@ -44,6 +43,10 @@ section {
   word-wrap: break-word;
   z-index: 0;
 
+  /* Definitions for classic bhavior: Users can adopt flex centering by tweaking style `section { display: flex }` */
+  flex-flow: column nowrap;
+  align-items: stretch;
+
   &::after {
     align-items: flex-end;
     background: linear-gradient(