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.

#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:

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

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:

1php artisan make:component Alert

2. Define your component in app/View/Components/Alert.php:

 1namespace App\View\Components;
 2 
 3use Illuminate\View\Component;
 4 
 5class Alert extends Component
 6{
 7    public $type;
 8    public $message;
 9 
10    public function __construct($type, $message)
11    {
12        $this->type = $type;
13        $this->message = $message;
14    }
15 
16    public function render()
17    {
18        return view('components.alert');
19    }
20}

3. Create the component view in resources/views/components/alert.blade.php:

1<div class="alert alert-{{ $type }}">
2    {{ $message }}
3</div>

4. Use your component in Markdown:

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

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

#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:

1'commonmark' => [
2    'extensions' => [
3        // ... other extensions
4        BenBjurstrom\Prezet\Extensions\MarkdownBladeExtension::class,
5    ],
6    // ... other config options
7],