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.
package com.vaadin.demo.component.markdown;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.markdown.Markdown;
import com.vaadin.flow.router.Route;
@Route("markdown-basic")
public class MarkdownBasic extends Div {
public MarkdownBasic() {
// tag::snippet[]
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);
// end::snippet[]
}
}
markdown-basic.tsx
import React from 'react';
import { Markdown } from '@vaadin/react-components/Markdown.js';
function Example() {
// tag::snippet[]
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>;
// end::snippet[]
}
markdown-basic.ts
import '@vaadin/markdown';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';
@customElement('markdown-basic')
export class MarkdownBasic extends LitElement {
protected override createRenderRoot() {
const root = super.createRenderRoot();
applyTheme(root);
return root;
}
protected override render() {
// tag::snippet[]
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>`;
// end::snippet[]
}
}
Line Breaks
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.
package com.vaadin.demo.component.markdown;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.markdown.Markdown;
import com.vaadin.flow.router.Route;
@Route("markdown-line-breaks")
public class MarkdownLineBreaks extends Div {
public MarkdownLineBreaks() {
// tag::snippet[]
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);
// end::snippet[]
add(markdown);
}
}
markdown-line-breaks.tsx
import React from 'react';
import { Markdown } from '@vaadin/react-components/Markdown.js';
function Example() {
// tag::snippet[]
const markdownText = `
Hi Maria,
Your order shipped this morning.
It should arrive by Thursday.
Best regards,
Tom
`;
return <Markdown lineBreaks>{markdownText}</Markdown>;
// end::snippet[]
}
markdown-line-breaks.ts
import '@vaadin/markdown';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';
@customElement('markdown-line-breaks')
export class MarkdownLineBreaks extends LitElement {
protected override createRenderRoot() {
const root = super.createRenderRoot();
applyTheme(root);
return root;
}
protected override render() {
// tag::snippet[]
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>`;
// end::snippet[]
}
}