> Markdown version of [Markdown](https://vaadin.com/docs/next/components/markdown). Section index: [llms.txt](https://vaadin.com/docs/next/components/llms.txt)

# Markdown

The Markdown component renders content written in the Markdown syntax as HTML. It supports basic text formatting, lists, links, and more. All content provided to the component is internally sanitized to prevent potentially dangerous HTML from being rendered.

For more information about common Markdown syntax features, see the [Markdown Guide](https://www.markdownguide.org/basic-syntax/).

**Lit** — `markdown-basic.ts`

```html
const markdownText = `
## Rich Text Formatting

You can create **bold text**, *italicized text*, and \`inline code\` with simple Markdown syntax.
You can also ~~strike through~~ text when needed.

## Lists

### Ordered List:
1. First item
2. Second item
3. Third item with **bold text**

### Unordered List:
- Fruits
  - Apples 🍎
  - Bananas 🍌
  - Oranges 🍊
- Vegetables
  - Carrots
  - Broccoli

## Links & Quotes

> Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents.

[Visit Vaadin website](https://vaadin.com) | [Learn more about Markdown](https://www.markdownguide.org/)
    `;

    return html`<vaadin-markdown .content=${markdownText}></vaadin-markdown>`;
```

**Flow** — `MarkdownBasic.java`

```java
String markdownText = """
        ## Rich Text Formatting

        You can create **bold text**, *italicized text*, and `inline code` with simple Markdown syntax.
        You can also ~~strike through~~ text when needed.

        ## Lists

        ### Ordered List:
        1. First item
        2. Second item
        3. Third item with **bold text**

        ### Unordered List:
        - Fruits
            - Apples 🍎
            - Bananas 🍌
            - Oranges 🍊
        - Vegetables
            - Carrots
            - Broccoli

        ## Links & Quotes

        > Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents.

        [Visit Vaadin website](https://vaadin.com) | [Learn more about Markdown](https://www.markdownguide.org/)
        """;

Markdown markdown = new Markdown(markdownText);
add(markdown);
```

**React** — `markdown-basic.tsx`

```tsx
const markdownText = `
## Rich Text Formatting

You can create **bold text**, *italicized text*, and \`inline code\` with simple Markdown syntax.
You can also ~~strike through~~ text when needed.

## Lists

### Ordered List:
1. First item
2. Second item
3. Third item with **bold text**

### Unordered List:
- Fruits
  - Apples 🍎
  - Bananas 🍌
  - Oranges 🍊
- Vegetables
  - Carrots
  - Broccoli

## Links & Quotes

> Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents.

[Visit Vaadin website](https://vaadin.com) | [Learn more about Markdown](https://www.markdownguide.org/)
  `;

  return <Markdown>{markdownText}</Markdown>;
```

## <a id="line-breaks"></a>Line Breaks (since V25.3)

By default, the component follows the original Markdown specification: a single line break within a paragraph is collapsed into a space, and a blank line is needed to start a new paragraph. Enabling the line breaks option renders single line breaks (also called *soft breaks*) as actual line breaks, the way chat and message-style Markdown behaves typically. Blank lines still start a new paragraph.

**Lit** — `markdown-line-breaks.ts`

```typescript
const markdownText = `
Hi Maria,
Your order shipped this morning.
It should arrive by Thursday.

Best regards,
Tom
    `;

    return html`<vaadin-markdown line-breaks .content=${markdownText}></vaadin-markdown>`;
```

**Flow** — `MarkdownLineBreaks.java`

```java
String markdownText = """
        Hi Maria,
        Your order shipped this morning.
        It should arrive by Thursday.

        Best regards,
        Tom
        """;

Markdown markdown = new Markdown(markdownText);
markdown.setLineBreaks(true);
```

**React** — `markdown-line-breaks.tsx`

```tsx
const markdownText = `
Hi Maria,
Your order shipped this morning.
It should arrive by Thursday.

Best regards,
Tom
  `;

  return <Markdown lineBreaks>{markdownText}</Markdown>;
```

`77B51D28-FE42-4829-A315-D0F3C8A55BED`