Changes in new Marp Core v4 🚀

[yhatt]

Marp Core has now been updated major version to v4.0.0. This update brings a lot of improvements and updates.

TL;DR: New Marp Core v4 is available in the new Marp CLI v4. (Marp for VS Code extension is not yet)

⚡️ Breaking changes

Node.js 18 and later is required

Marp Core v4 requires Node.js 18 or later. If you are using outdated Node.js 16 or earlier to run CLI or your app that is integrated with Marp, you need to upgrade Node.js.

The slide element now has display: block

Until Marp Core v3, the slide element <section> was a Flexbox container display: flex in some themes and variants, default, uncover, and gaia with lead class. It was a required restriction to make content vertically centered.

However, it restricted some useful CSS features provided to the basic box model too. Actually some Marp users were confused by the unavailability of that features. For example:

• Floating layout: How should I use floating elements? #50
• CSS Multiple-column layout: Any initiative to implement columns in Marp? #192 (reply in thread)
• Margin collapsing
• etc.

Baseline 2024 browsers have improved the block layout to be able to center content vertically without using Flexbox. Therefore, the time has come to remove the confusing restriction, and change the slide container layout from display: flex to display: block.

By this change, Marp could be easier to use more CSS layout features. A following example is using the floating layout to the image:

<!-- size: 4:3 -->

<img src="https://marp.app/favicon.png" alt="Marp" width="200" height="200" align="right" />

# **Marp**: Markdown Presentation Ecosystem

Marp helps your writing Markdown for creating the slide deck. Marp's simple and minimal design makes it easy to focus on your content, and the logical flow of the presentation.

↩︎ Revert to Flexbox

This change may break the existing slide with the container that is expected Flexbox. In addition, outdated browsers before Baseline 2024 cannot render centered contents in the block layout.

You can tweak the style in Markdown or the custom theme to get back the previous Flexbox container.

• For default and uncover theme:

  <style>
    section {
      display: flex;
    }
  </style>

• For gaia theme's lead class:

  <style>
    section.lead {
      display: flex;
    }
  </style>

When reverted to Flexbox, the slide container will make compatible with v3, and following "Safe centering" is also disabled.

Safe centering

Introduces "Safe centering", to help creating the clear and well layouted slide deck for audiences.

Visual margins are important for the readability of a presentation. Every built-in theme has defined the padding, the space from the slide edge to the content area. That area would be better to avoid placing slide content, but sometimes overflowed from the safe area if put too much content on a single slide page.

Before v4, the vertical centering provided by built-in themes was always centered forcibly, even if the content might be overlapped with the padding area.

In Marp Core v4, content becomes centered vertically within the safe area by align-content: safe center. It will overflow from only the bottom of the safe area if a slide page has too much content.

This change makes slide authors easier to pay attention to the padding area, and encourages creating visually better slides. It also helps to prevent from the bad habit for the readability, putting too much content on a single page.

↩︎ Revert to unsafe centering

If you want to revert to the previous centering, you can overload align-content property with unsafe center in your Markdown or the custom theme.

• For default and uncover theme:

  <style>
    section {
      align-content: unsafe center;
    }
  </style>

• For gaia theme's lead class:

  <style>
    section.lead {
      align-content: unsafe center;
    }
  </style>

✨ Updates

Relaxed HTML usage

v4 has relaxed the default limitation of HTML usage in Markdown, and a lot of HTML elements and attributes are now allowed by default.

In Marp slides, HTML elements are commonly used within Markdown to fine-tune the layout. Many users had explicitly enabled an option to permit HTML elements in each Marp tool, but this has a big risk because it also enables insecure elements that must be used with caution.

In addition, we have discovered through issues and discussions that forgetting to permit HTML elements is a very common pitfall for Marp users. The previous Marp Core had been allowed only <br> tag by default, but we have concluded that it is desirable to permit enough HTML elements by default.

The full list of default allowed HTML elements and attributes is available in https://github.com/marp-team/marp-core/blob/main/src/html/allowlist.ts.

Many thanks to the feedback from the community in the discussion marp-team/marp#501.

Note

The insecure HTML elements and attributes such as <script> element and on**** attribute are not yet allowed. To allow all HTML usage including insecure, you should permit explicitly in the setting of Marp tools as before.

Initial support for CSS nesting

Backed by the contribution to Marpit framework v3.1.0, the initial support for CSS nesting has been added.

<style>
  h1 {
    strong {
      color: red;

      &:hover {
        color: green;
      }
    }
  }
</style>

# Hello, **world**!

Marp will try to make flatten nested CSS rules before rendering, to get compatibility with CSS manipulations by the current Marpit. So the result of styling might become slightly different from native CSS nesting spec (e.g. the calculation of specificity). We have planned to support CSS nesting in the next-gen framework correctly.

[alanlivio]

That is amazing @yhatt. 🥳🥳🥳