Skip to content

Support Marpit ![bg](url) syntax for slide background images#131

Merged
jongalloway merged 3 commits intomainfrom
copilot/support-marpit-bg-image-syntax
Mar 15, 2026
Merged

Support Marpit ![bg](url) syntax for slide background images#131
jongalloway merged 3 commits intomainfrom
copilot/support-marpit-bg-image-syntax

Conversation

Copy link
Contributor

Copilot AI commented Mar 14, 2026

![bg](url) was treated as a normal inline image instead of a slide background. This adds parser recognition of the bg alt-text marker and wires it into the existing background rendering path.

How it works

# Slide Title

![bg](photo.jpg)

![bg](url) is now promoted to SlideStyle.BackgroundImage during parsing and removed from the slide element list — the image renders identically to a <!-- backgroundImage: url --> directive.

Changes

Parser (MarpMarkdownParser.cs)

  • After ParseElements(), collects any ImageElement with alt text exactly "bg" (case-insensitive)
  • Applies the first one to SlideStyle.BackgroundImage unless a directive has already set it
  • Removes all bg-marker elements from the slide element list

Precedence

  • Directive (<!-- backgroundImage: ... --> / front-matter) > ![bg](url) syntax > theme CSS
  • When multiple ![bg](url) appear on one slide, only the first is used; split-background layouts are not yet supported

Tests

  • Renamed existing tests that captured old "inline picture" behavior to reflect the new semantics
  • Added 6 parser tests: background image set, element not added, directive precedence, other elements preserved, case insensitivity, first-of-multiple used
  • Added 1 renderer test: directive wins over ![bg](...)

Docs (doc/marp-markdown.md)

  • Feature table updated to Supported subset
  • New Background Image Precedence section documents the three-tier priority
  • Not Yet Supported section updated to list only the unimplemented modifiers (bg cover, bg contain, bg left, bg right, percentage sizing, split layouts)

Copilot AI and others added 2 commits March 14, 2026 23:16
Co-authored-by: jongalloway <68539+jongalloway@users.noreply.github.com>
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR adds Marpit-style background image support via Markdown image alt text (![bg](url)), promoting those images to SlideStyle.BackgroundImage so they render as full-slide backgrounds rather than inline image elements.

Changes:

  • Update the core Markdown parser to detect ![bg](...) images (case-insensitive bg) and set the slide background image accordingly, removing those images from slide elements.
  • Update/extend parser and renderer tests to assert the new ![bg] background behavior and precedence with backgroundImage directives.
  • Update documentation to describe the supported subset and precedence rules for background images.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File Description
tests/MarpToPptx.Tests/PptxRendererTests.cs Adjusts/extends renderer assertions so ![bg] results in a background picture (empty Description) and validates directive-vs-syntax behavior.
tests/MarpToPptx.Tests/ParserTests.cs Updates the prior “bg keyword as alt text” expectation to “sets slide background”, and adds a suite of ![bg] parser behavior tests (precedence, element removal, case-insensitivity, first-only).
src/MarpToPptx.Core/Parsing/MarpMarkdownParser.cs Implements promotion of ![bg](...) images to SlideStyle.BackgroundImage and skips adding those images as inline elements.
doc/marp-markdown.md Documents ![bg](url) support, limitations (modifiers not parsed, first-only), and background image precedence.

You can also share your feedback on Copilot code review. Take the survey.

foreach (var element in ParseElements(cleaned))
foreach (var element in allElements)
{
if (bgImages.Contains(element))
Comment on lines +116 to +125
// Promote any ![bg](url) images to slide background image.
// Only exact "bg" alt text (case-insensitive) is recognized in this slice.
// A directive-specified backgroundImage always takes precedence.
var bgImages = allElements
.OfType<ImageElement>()
.Where(img => IsBgAltText(img.AltText))
.ToList();

if (bgImages.Count > 0 && string.IsNullOrWhiteSpace(effectiveStyle.BackgroundImage))
{
@jongalloway
Copy link
Owner

@copilot apply changes based on the comments in this thread

…ntax promotion

Co-authored-by: jongalloway <68539+jongalloway@users.noreply.github.com>
Copy link
Contributor Author

Copilot AI commented Mar 15, 2026

@copilot apply changes based on the comments in this thread

Both issues from the review are fixed in 05985e7:

  1. Type-safe filter — replaced bgImages.Contains(element) with element is ImageElement img && IsBgAltText(img.AltText) in the element-filtering loop.
  2. Empty-directive precedence — changed string.IsNullOrWhiteSpace(effectiveStyle.BackgroundImage) to effectiveStyle.BackgroundImage is null, so an explicit empty-value directive (<!-- backgroundImage: -->) correctly blocks ![bg](...) promotion on the same slide. The comment now accurately says "always takes precedence". Added a new parser test (Parser_BgImageSyntax_EmptyDirectiveClearsBackground_BgSyntaxDoesNotPromote) to cover this case.

Copilot AI requested a review from jongalloway March 15, 2026 00:09
@jongalloway jongalloway merged commit 4747bca into main Mar 15, 2026
5 checks passed
@jongalloway jongalloway deleted the copilot/support-marpit-bg-image-syntax branch March 15, 2026 00:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support Marpit bg image syntax for slide background images

3 participants