Markdown
The Markdown component converts GitHub‑style Markdown into HTML. It supports headings, paragraphs, lists, inline code, code blocks, links, images, and more. The conversion is powered by Markdig and syntax highlighting is applied via Highlight.js using the rzMarkdown Alpine.js data object.
For a full-featured markdown demo, click here.
Special Note
The Markdown component requires the Tailwind Typography component in order to render correctly.
Basic Markdown Rendering
This example demonstrates rendering simple Markdown with headings, paragraphs, lists, and inline styling.
Source
<Markdown>
# Welcome to RizzyUI Markdown
This is an example of **bold text**, *italic text*, and `inline code`.
- List Item One
- List Item Two
- List Item Three
[Visit our website](https://rizzyui.com)
</Markdown>Markdown with Code Block
In this example, the Markdown component renders a code block with syntax highlighting for C#.
Source
<Markdown>
## C# Code Example
```csharp
public class HelloWorld {
public void SayHello() {
Console.WriteLine("Hello, world!");
}
}
```
</Markdown>Markdown Component Parameters
| Property | Description |
|---|---|
| Content | RenderFragment – The Markdown content to be converted to HTML. Alternatively, you can pass a string via the Content parameter. |
| ComponentAssets | string[] – Optional array of asset URLs (JavaScript/CSS) to load for syntax highlighting. |