Markdown

The Markdown component converts GitHub‑style Markdown into HTML. It supports RzHeadings, RzParagraphs, 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 RzHeadings, RzParagraphs, lists, and inline styling.

Source

<RzMarkdown>
# 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)
</RzMarkdown>

Markdown with Code Block

In this example, the Markdown component renders a code block with syntax highlighting for C#.

Source

<RzMarkdown>
## C# Code Example

```csharp
public class HelloWorld {
    public void SayHello() {
        Console.WriteLine("Hello, world!");
    }
}
```
</RzMarkdown>

Markdown Component Parameters

Property	Description	Type	Default
`Content`	`RenderFragment` – The Markdown content to be converted to HTML. Alternatively, you can pass a string via the `Content` parameter.	`RenderFragment?`	`null`
`ComponentAssets`	`string[]` – Optional array of asset URLs (JavaScript/CSS) to load for syntax highlighting.	`string[]`	`null`
`ProseWidth`	`ProseWidth` – Controls the maximum width of the rendered prose content.	`ProseWidth`	`ProseWidth.Comfortable`
`Pipeline`	`MarkdownPipeline?` – The Markdig pipeline used for conversion. Defaults to a pipeline with advanced extensions and custom code block rendering.	`MarkdownPipeline?`	`null`

Alpine API

This page uses the rzMarkdown Alpine x-data component.

Method	Parameters	Description
`None`	`—`	No stable public methods are documented; initialization is automatic.