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


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

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 1Heading 2Heading 3
Cell A1Cell A2Cell A3
Cell B1Cell B2Cell 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 1Heading 2Heading 3
Cell A1Cell A2Cell A3
Cell B1Cell B2Cell B3
Cell C1Cell C2Cell C3
Cell D1Cell D2Cell D3
Cell E1Cell E2Cell 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 #

  1. First item
  2. Second item
  3. 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 #

  1. First item
    • Item 1
    • Item 2
    • Item 3
  2. Second item
    • Nested item 1
      • Further nested item 1
      • Further nested item 2
      • Further nested item 3
    • Nested item 2
    • Nested item 3
  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>
  1. First item
    1. Item 1
    2. Item 2
    3. Item 3
  2. 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
  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>
<Markdown>
[BlazorBootstrap - Docs](https://docs.blazorbootstrap.com/)
[BlazorBootstrap - Demos](https://demos.blazorbootstrap.com/)
</Markdown>

Images #

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


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

Images


This is an alt text.

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 columnsRight columns
left fooright foo
left barright bar
left bazright 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 Bootstrap Blazor Bootstrap
  • Designed and built with all the love in the world by the Blazor Bootstrap team with the help of our contributors.
  • Code licensed Apache License 2.0.
  • Currently v3.4.0.
  • Powered by .NET 9.0.0
Links
Guides
Community
Blazor Express