Table of Contents
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.
Leave a Reply