Html tags at the end of the file break css theme loading and --html false doesn't behave the same as unspecified html setting

[pavelzw]

Version of Marp Tool

@marp-team/marp-cli v2.4.0 (w/ @marp-team/marp-core v3.5.0)

Operating System

macOS

Environment

• OS version: macOS 13.2.1
• Node.js version 19.7.0

How to reproduce

test.md

---
marp: true
---

# Test **title**

<div></div>

(here no trailing whitespace!)

test.css

/* @theme test */
@charset "UTF-8";

section {
  background-color: white;
  font-size: 35px;
  color: red;
}

Compare the output of these three commands:

marp --theme test.css -o test.pdf test.md
marp --theme test.css -o test.pdf test.md --html true
marp --theme test.css -o test.pdf test.md --html false

Expected behavior

The theme should be loaded everywhere and the output of the first and third command should be the same. Additionally, it should look the same with and without a new line at the end in test.md

marp --theme test.css -o test.pdf test.md

Expected:

marp --theme test.css -o test.pdf test.md --html true

Expected:

marp --theme test.css -o test.pdf test.md --html false

Expected:

Actual behavior

The first and third commands differ in output (see screenshots below) and the theme loading breaks if no newline is present at the end of test.md if --html false isn't set explicitly.

marp --theme test.css -o test.pdf test.md

Actual:

marp --theme test.css -o test.pdf test.md --html true

Actual:

marp --theme test.css -o test.pdf test.md --html false

Actual:

Additional information

This issue contains two bugs, but the html flag bug cannot be replicated without the other one as an example.

The div bug can also be replicated using other block elements such as <main></main>, <header></header> etc., but not with inline elements such as <span></span>. It does however break when using the "short hand" notation <span />.

[yhatt]

Good catch! I'm sure that bug has been around in Marp CLI for a long time.

I'm going to fix that by using an internal Marpit plugin, instead of the content injection to Markdown (described in following).

Details

The internal operation of the --theme option in Marp CLI is generating a unique name for the theme CSS automatically and applying it by inserting an HTML comment <!-- theme: (generated name) --> at the end of the Markdown.

---
marp: true
---

# Test **title**

<div></div>
<!-- theme: 33mkms86s8i6jm51 -->

In this example, 33mkms86s8i6jm51 is a unique value generated by Marp CLI. If --html option was not enabled, the overloaded global directive works as intended.

Now, an important thing is that Marp's directive definitions using HTML comments are recognized only for HTML blocks where the beginning or entire of block is a comment. In the above example, theme directive won't be parsed as a directive.

By enabling HTML through --html option, I guess an internally injected <!-- theme: 33mkms86s8i6jm51 --> might be incorporated as part of the HTML tag block at the last of Markdown.