Markdown Whitespace Sensitivity in Laravel Mail Templates

📖 2 minutes read

Laravel’s markdown mail renderer is picky about whitespace. If you’ve ever seen literal **bold** text in your emails instead of actual bold formatting, indentation in your Blade template is probably the culprit.

The Problem

When building email templates with Laravel’s Markdown Mailable components, proper indentation makes Blade code readable:

@component('mail::message')
    @slot('header')
        @component('mail::header', ['url' => config('app.url')])
            <img src="{{ $logoUrl }}" alt="Logo">
        @endcomponent
    @endslot

    **Customer Name:** {{ $task->customer_name }}<br>
    **Status:** {{ $task->status }}<br>

    Thank you!
@endcomponent

But when you preview the email, markdown doesn’t render. You see literal asterisks instead of bold text.

Why It Happens

Laravel’s mail markdown parser (built on CommonMark) interprets indented lines as code blocks. When your Blade directives add whitespace, lines like:

    **Customer Name:** John Smith

…get parsed as preformatted code, not markdown.

The Fix

Remove ALL indentation from markdown content in mail templates:

@component('mail::message')
@slot('header')
@component('mail::header', ['url' => config('app.url')])
<img src="{{ $logoUrl }}" alt="Logo">
@endcomponent
@endslot

**Customer Name:** {{ $task->customer_name }}<br>
**Status:** {{ $task->status }}<br>

Thank you!
@endcomponent

Yes, it looks messy in your editor. But your emails will render correctly.

Alternative: Skip Markdown Entirely

If you need design control beyond markdown’s capabilities, use plain HTML with inline CSS:

@component('mail::message')
<div style="margin-bottom: 16px;">
    <strong>Customer Name:</strong> {{ $task->customer_name }}<br>
    <strong>Status:</strong> {{ $task->status }}
</div>
@endcomponent

You get full control over styling, and indentation doesn’t break anything. The trade-off: more verbose markup.

When to Use Each Approach

Use markdown (zero indentation) when:

  • Content is simple (text, links, basic formatting)
  • You want Laravel’s default email styling
  • Team prefers concise template syntax

Use HTML when:

  • You need custom layouts or complex styling
  • Design specs require precise spacing/colors
  • You’re already fighting markdown quirks

Either way, test your emails in actual mail clients—not just browser previews. Gmail, Outlook, and Apple Mail all render HTML differently.

Daryle De Silva

VP of Technology

11+ years building and scaling web applications. Writing about what I learn in the trenches.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *