Blazor Markdown Preview
Use Blazor Bootstrap Markdown component to add formatting, tables, images, and more to your project pages.
Parameters
| Name | Type | Default | Required | Description | Added Version |
|---|---|---|---|---|---|
| ChildContent | RenderFragment | null | ✔️ | Gets or sets the content to be rendered within the component. | 3.1.0 |
| TableCssClass | string? | table | Gets or sets the CSS class for table. | 3.1.0 | |
| BlockquotesCssClass | string? | blockquote | Gets or sets the CSS class for blockquotes. | 3.1.0 |
Live preview
Examples
Headers
Use headers to structure your content. Start a line with # for a heading. Add more # characters for subheadings, up to six levels.
<Markdown>
# This is a H1 header
## This is a H2 header
### This is a H3 header
#### This is a H4 header
##### This is a H5 header
###### This is a H6 header
</Markdown>
Paragraphs and line breaks
Break your text into paragraphs or line breaks for easier reading.
<Markdown>
Add lines between your text with the **Enter** key.
Your text gets better spaced and makes it easier to read.
Add lines between your text with the **Enter** key.
Your text gets better spaced and makes it easier to read.
</Markdown>
Blockquotes
Quote text with > before it. Use more > characters to nest quotes. For blocks of text, use > at the start of each line.
<Markdown>
> A well-known quote, contained in a blockquote element.
</Markdown>
<Markdown>
> Single line quote
>> Nested quote
>> multiple line
>> quote
</Markdown>
Horizontal rules
Add a horizontal rule with a line of ---.
<Markdown>
above
---
below
</Markdown>
Emphasis (bold, italics, strikethrough)
Emphasize text with bold, italics, or strikethrough:
- Italics:
*text*or_text_ - Bold:
**text** - Strikethrough:
~~text~~ - Combine for more emphasis.
<Markdown>
Use _emphasis_ in comments to express **strong** opinions and point out ~~corrections~~
**_Bold, italicized text_**
**~~Bold, strike-through text~~**
</Markdown>
Code highlighting
Tables
Tables help organize structured data.
- Use
|to separate cells. - Escape
|with\|if used within a cell. - Use
<br />for new lines within a cell. - End each row with a carriage return (CR) or line feed (LF).
<Markdown>
| Heading 1 | Heading 2 | Heading 3 |
|--|--|--|
| Cell A1 | Cell A2 | Cell A3 |
| Cell B1 | Cell B2 | Cell B3<br />second line of text |
</Markdown>
<Markdown TableCssClass="table table-striped table-hover table-bordered">
| Heading 1 | Heading 2 | Heading 3 |
|--|--|--|
| Cell A1 | Cell A2 | Cell A3 |
| Cell B1 | Cell B2 | Cell B3 |
| Cell C1 | Cell C2 | Cell C3 |
| Cell D1 | Cell D2 | Cell D3 |
| Cell E1 | Cell E2 | Cell E3 |
</Markdown>
Lists
Use lists to organize related items:
- Ordered lists: start with a number followed by a period.
- Unordered lists: start with a
-. - Begin each list item on a new line.
Ordered list
<Markdown>
1. First item
1. Second item
1. Third item
</Markdown>
Unordered list
<Markdown>
- Item 1
- Item 2
- Item 3
</Markdown>
Nested list
<Markdown>
1. First item
1. Item 1
1. Item 2
1. Item 3
1. Second item
1. Nested item 1
1. Further nested item 1
1. Further nested item 2
1. Further nested item 3
1. Nested item 2
1. Nested item 3
1. Third item
</Markdown>
<Markdown>
- First item
- Item 1
- Item 2
- Item 3
- Second item
- Nested item 1
- Further nested item 1
- Further nested item 2
- Further nested item 3
- Nested item 2
- Nested item 3
- Third item
</Markdown>
<Markdown>
1. First item
- Item 1
- Item 2
- Item 3
1. Second item
- Nested item 1
- Further nested item 1
- Further nested item 2
- Further nested item 3
- Nested item 2
- Nested item 3
1. Third item
</Markdown>
Links
<Markdown>
[BlazorBootstrap - Docs](https://docs.blazorbootstrap.com/)
[BlazorBootstrap - Demos](https://demos.blazorbootstrap.com/)
</Markdown>
Images
<Markdown>
</Markdown>
<Markdown>
</Markdown>
<Markdown>
</Markdown>