Blazor Markdown

Use Blazor Bootstrap Markdown component to add formatting, tables, images, and more to your project pages.

Live preview #

Markdown

Preview

Heading 1

Heading 2

<div class="row border-bottom mb-3">
    <div class="col"><b>Markdown</b></div>
    <div class="col"><b>Preview</b></div>
</div>
<div class="row" style="max-height:486px;">
    <div class="col">
        <textarea class="form-control"
                  rows="18"
                  placeholder="Enter markdown here"
                  @bind="markdown"
                  @bind:event="oninput">
        </textarea>
    </div>
    <div class="col">
        <Markdown style="max-height: 437px;overflow-y:auto;">@markdown</Markdown>
    </div>
</div>

@code {
    private string markdown = "# Heading 1\n## Heading 2\n\n![BlazorBootstrap](https://demos.blazorbootstrap.com/images/logo/logo-color.svg =50)";
}

Headers #

Use headers to structure your content. Start a line with # for a heading. Add more # characters for subheadings, up to six levels.

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>
# 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.

Add lines between your text with the Enter key.
Your text gets better spaced and makes it easier to read.

<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.

A well-known quote, contained in a blockquote element.

Single line quote
Nested quote
multiple line
quote

<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 ---.

above

below

<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.

Use emphasis in comments to express strong opinions and point out ~~corrections~~
Bold, italicized text
~~Bold, strike-through text~~

<Markdown>
Use _emphasis_ in comments to express **strong** opinions and point out ~~corrections~~
**_Bold, italicized text_**
**~~Bold, strike-through text~~**
</Markdown>

Code highlighting #

const count = records.length;

Console.WriteLine("Hello, World!");

var countdown = new TimerRemaining()
{
    buffer =
    {
        [^1] = 0,
        [^2] = 1,
        [^3] = 2,
        [^4] = 3,
        [^5] = 4,
        [^6] = 5,
        [^7] = 6,
        [^8] = 7,
        [^9] = 8,
        [^10] = 9
    }
};

public partial class C
{
    // Declaring declaration
    public partial string Name { get; set; }
}

public partial class C
{
    // implementation declaration:
    private string _name;
    public partial string Name
    {
        get => _name;
        set => _name = value;
    }
}

<Markdown>
```js
const count = records.length;
```
</Markdown>

<Markdown>
```csharp
Console.WriteLine("Hello, World!");
```
</Markdown>

<Markdown>
```csharp
var countdown = new TimerRemaining()
{
    buffer =
    {
        [^1] = 0,
        [^2] = 1,
        [^3] = 2,
        [^4] = 3,
        [^5] = 4,
        [^6] = 5,
        [^7] = 6,
        [^8] = 7,
        [^9] = 8,
        [^10] = 9
    }
};
```
</Markdown>

<Markdown>
```csharp
public partial class C
{
    // Declaring declaration
    public partial string Name { get; set; }
}

public partial class C
{
    // implementation declaration:
    private string _name;
    public partial string Name
    {
        get => _name;
        set => _name = value;
    }
}
```
</Markdown>

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).

Heading 1	Heading 2	Heading 3
Cell A1	Cell A2	Cell A3
Cell B1	Cell B2	Cell B3 second line of text

<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>

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 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 #

First item
Second item
Third item

<Markdown>
1. First item
1. Second item
1. Third item
</Markdown>

Unordered list #

Item 1
Item 2
Item 3

<Markdown>
- Item 1
- Item 2
- Item 3
</Markdown>

Nested list #

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>
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>

First item
1. Item 1
2. Item 2
3. Item 3
Second item
1. Nested item 1
  1. Further nested item 1
  2. Further nested item 2
  3. Further nested item 3
2. Nested item 2
3. Nested item 3
Third item

<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>

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>
- 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>

Links #

BlazorBootstrap - Docs
BlazorBootstrap - Demos

<Markdown>
[BlazorBootstrap - Docs](https://docs.blazorbootstrap.com/)
[BlazorBootstrap - Demos](https://demos.blazorbootstrap.com/)
</Markdown>

Images #

<Markdown>
![BlazorBootstrap](https://demos.blazorbootstrap.com/images/logo/logo-color.svg)
</Markdown>

<Markdown>
![BlazorBootstrap](https://demos.blazorbootstrap.com/images/logo/logo-color.svg =200x200)
</Markdown>

<Markdown>
![BlazorBootstrap](https://demos.blazorbootstrap.com/images/logo/logo-color.svg =50)
</Markdown>

Examples #

Markdown syntax guide

Headers

This is a Heading h1

This is a Heading h2

This is a Heading h6

Emphasis

This text will be italic
This will also be italic

This text will be bold
This will also be bold

You can combine them

Lists

Unordered

* Item 1
* Item 2
* Item 2a
* Item 2b

Ordered

Item 1
Item 2
Item 3
1. Item 3a
2. Item 3b

Images

Links

BlazorBootstrap Demos.

Blockquotes

Markdown is a lightweight markup language with plain-text-formatting syntax, created in 2004 by John Gruber with Aaron Swartz.
Markdown is often used to format readme files, for writing messages in online discussion forums, and to create rich text using a plain text editor.

Tables

Left columns	Right columns
left foo	right foo
left bar	right bar
left baz	right baz

let message = 'Hello world';
alert(message);

Inline code

This web site is using markedjs/marked.

<Markdown>
# Markdown syntax guide

## Headers

# This is a Heading h1
## This is a Heading h2
###### This is a Heading h6

## Emphasis

*This text will be italic*  
_This will also be italic_

**This text will be bold**  
__This will also be bold__

_You **can** combine them_

## Lists

### Unordered

* Item 1
* Item 2
* Item 2a
* Item 2b

### Ordered

1. Item 1
2. Item 2
3. Item 3
    1. Item 3a
    2. Item 3b

## Images

![This is an alt text.](https://demos.blazorbootstrap.com/images/logo/logo-color.svg =50)

## Links

[BlazorBootstrap Demos](https://demos.blazorbootstrap.com/).

## Blockquotes

> Markdown is a lightweight markup language with plain-text-formatting syntax, created in 2004 by John Gruber with Aaron Swartz.
>> Markdown is often used to format readme files, for writing messages in online discussion forums, and to create rich text using a plain text editor.

## Tables

| Left columns  | Right columns |
|--|--|
| left foo | right foo |
| left bar | right bar |
| left baz | right baz |

## Blocks of code

```
let message = 'Hello world';
alert(message);
```

## Inline code

This web site is using `markedjs/marked`.
    
</Markdown>

If you like Blazor Bootstrap, give it a star on GitHub!

Blazor Markdown

Live preview #

Heading 1

Heading 2

Headers #

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

Paragraphs and line breaks #

Blockquotes #

Horizontal rules #

Emphasis (bold, italics, strikethrough) #

Code highlighting #

Tables #

Lists #

Ordered list #

Unordered list #

Nested list #

Links #

Images #

Examples #

Markdown syntax guide

Headers

This is a Heading h1

This is a Heading h2

This is a Heading h6

Emphasis

Lists

Unordered

Ordered

Images

Links

Blockquotes

Tables

Inline code

Links

Guides

Community