Skip to content

📌 Markdown images don’t render unless surrounded by blank lines #420

@nikunjAppscrip

Description

@nikunjAppscrip

Describe the bug
Markdown images using [![alt text](image-url)](link-url) or [title](url) only render correctly if they are surrounded by blank lines. If the image is inline with text, or immediately follows a text line without a blank line, it does not render at all.

Checklist

  • I can reproduce this issue with a vanilla SwiftUI project.
  • I can reproduce this issue using the main branch of this package.
  • This bug hasn't been addressed in an existing GitHub issue.

Steps to reproduce
Use the following Markdown in a Markdown view:

**Rosemary** - Evergreen herb with needle-like leaves and blue flowers: [![Rosemary growing in containers on balcony](https://www.epicgardening.com/wp-content/uploads/2023/09/Potted-Rosemary-near-white-brick-wall-1200x667.jpg)](https://www.epicgardening.com/container-rosemary/)

**Oregano** - Bushy herb with small oval leaves, spreads nicely:
[![Oregano growing in terracotta pot](https://images.squarespace-cdn.com/content/v1/5bbfbb9e523958e4f1427d15/ae1df035-8d21-42a9-b33a-fc05f475d625/growing-oregano-in-terracotta-pot)](https://meadowlarkjournal.com/blog/growing-oregano-in-a-pot)

**Marigolds** - Bright orange and yellow blooms, compact and cheerful:

[![Marigolds in container garden](https://tonkadale.com/product_images/uploaded_images/l1000230.jpg)](https://tonkadale.com/blog/container-gardening-for-all-season-color/)
  1. Run the app.
  2. Observe that the Rosemary and Oregano images do not render, while the Marigolds image does.
  3. Adding a blank line before the image fixes the rendering.

Expected behavior
Images should render correctly regardless of whether they are inline with text or immediately follow text without blank lines.

Screenshots
Here’s an example where the first two images fail to render, but the last one (with a blank line before it) renders correctly:

Image

Version information

  • MarkdownUI: [e.g. 2.0.0, or a commit hash]
  • OS: [e.g. iOS 15, macOS 13]
  • Xcode: [e.g. 14.2.0]

Additional context
It seems that the Markdown parser currently requires block separation (blank lines) around images for them to render. Inline image + link syntax should ideally render without needing additional whitespace.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions