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">

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 }}
  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!" />


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
    // ... other config options