Markdown Viewer
The Markdown Viewer component renders markdown content with beautiful typography, syntax highlighting, and automatic styling.
Installation
Add the markdown viewer component to your project:
Usage
Basic Markdown
Markdown Viewer
Live preview rendered from the registry in an isolated iframe.
Loading preview...
Failed to load preview
Markdown Viewer
Full preview from the registry iframe.
Loading preview...
Headings
Markdown Viewer
headingsLive preview rendered from the registry in an isolated iframe.
Loading preview...
Failed to load preview
Markdown Viewer
Full preview from the registry iframe.
Loading preview...
Text Formatting
Markdown Viewer
formattingLive preview rendered from the registry in an isolated iframe.
Loading preview...
Failed to load preview
Markdown Viewer
Full preview from the registry iframe.
Loading preview...
Lists
Markdown Viewer
listsLive preview rendered from the registry in an isolated iframe.
Loading preview...
Failed to load preview
Markdown Viewer
Full preview from the registry iframe.
Loading preview...
Code Blocks
Markdown Viewer
codeLive preview rendered from the registry in an isolated iframe.
Loading preview...
Failed to load preview
Markdown Viewer
Full preview from the registry iframe.
Loading preview...
Blockquotes
Markdown Viewer
quotesLive preview rendered from the registry in an isolated iframe.
Loading preview...
Failed to load preview
Markdown Viewer
Full preview from the registry iframe.
Loading preview...
Links
Markdown Viewer
linksLive preview rendered from the registry in an isolated iframe.
Loading preview...
Failed to load preview
Markdown Viewer
Full preview from the registry iframe.
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
content |
string |
'' |
The markdown content to render. Can be passed as a prop or as slot content. |
maxHeight |
string |
'420px' |
Maximum height of the content area with overflow scroll. |
Examples
Using Content Prop
<x-ui.markdown-viewer :content="$markdownContent" />
Using Slot Content
<x-ui.markdown-viewer>
# Your Title
Your **markdown** content here...
</x-ui.>
### Custom Height
```php
<x-ui.markdown-viewer maxHeight="600px">
# Long Content
This content can be up to 600px tall before scrolling...
</x-ui.>
### Custom Styling
```php
<x-ui.markdown-viewer class="shadow-lg">
# Styled Content
Add your own Tailwind classes...
</x-ui.>
## Notes
- The component uses Laravel's `Str::markdown()` function for parsing
- HTML input is stripped for security
- Unsafe links are automatically filtered
- The component uses Tailwind Typography (`prose`) classes for styling
- Dark mode is automatically supported via `dark:prose-invert`