fassole
fassole

Features

Render Blade Components in Markdown

Prezet allows you to seamlessly integrate Blade components into your Markdown files, enabling you to create dynamic, interactive elements within your static content.

#The MarkdownBladeExtension

This feature is powered by the MarkdownBladeExtension. A custom CommonMark extension that's included in the Prezet package.

The extension looks for fenced code blocks in your Markdown that include the +parse info word. When it finds such a block, it renders the content as a Blade component and includes the result in the final HTML output.

This extension was heavily inspired by Aaron Francis's Blog Post and related YouTube video.

Play Video: Supercharge Markdown with Laravel

#YouTube Blade Component

The YouTube video above was rendered from a blade component referenced in the markdown document for this page by inlining the following code block:

```html +parse
<x-prezet::youtube videoid="dt1ado9wJi8" title="Supercharge Markdown with Laravel">
    Login
</x-prezet::youtube>
```

You can view the source code for the YouTube component in the package's youtube.blade.php file

#Creating Custom Components

You can create your own Blade components to use in your Markdown files. Here's a basic example:

  1. Create a new Blade component:
php artisan make:component Alert
  1. Define your component in app/View/Components/Alert.php:
namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
    public $type;
    public $message;

    public function __construct($type, $message)
    {
        $this->type = $type;
        $this->message = $message;
    }

    public function render()
    {
        return view('components.alert');
    }
}
  1. Create the component view in resources/views/components/alert.blade.php:
<div class="alert alert-{{ $type }}">
    {{ $message }}
</div>
  1. Use your component in Markdown:

This feature allows you to create rich, interactive content while maintaining the simplicity and readability of Markdown.

```html +parse
<x-alert type="warning" message="This is a warning message!" />
```

#Configuration

The MarkdownBladeExtension is enabled by default in Prezet. If you need to disable or customize its behavior, you can do so in the config/prezet.php file:

'commonmark' => [
    'extensions' => [
        // ... other extensions
        BenBjurstrom\Prezet\Extensions\MarkdownBladeExtension::class,
    ],
    // ... other config options
],

© 2025 fassole. All Rights Reserved.