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:

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
  1. 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}
  1. Create the component view in resources/views/components/alert.blade.php:
1<div class="alert alert-{{ $type }}">
2 {{ $message }}
3</div>
  1. 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],