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.
#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:
- Create a new Blade component:
php artisan make:component Alert
- 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');
}
}
- Create the component view in
resources/views/components/alert.blade.php
:
<div class="alert alert-{{ $type }}">
{{ $message }}
</div>
- 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
],