markdown

markdown is a component for rendering Markdown content.

XML Element

markdown

Java Class

Markdown

Attributes

id - alignSelf - classNames - colspan - content - css - height - maxHeight - maxWidth - minHeight - minWidth - visible - width

Handlers

AttachEvent - DetachEvent

Elements

content

Basics

The markdown component renders content written in Markdown syntax as formatted HTML. It supports basic text formatting, lists, links, and other common Markdown features. All content is automatically sanitized to prevent rendering of potentially dangerous HTML.

For detailed information about Markdown syntax, see the Markdown Guide.

You can provide content to the component using either the content attribute or a nested content element.

  • This example demonstrates how to add Markdown content via the content attribute and a string in the message bundle:

    <markdown content="msg://markdown.content"/>
    messages.properties
    com.company.onboarding.view.component.markdown/markdown.content=### Welcome to Our App\n\
This is a **markdown** component demonstrating:\n\
- Basic formatting\n\
- List items\n\
- [Links](https://example.com)
    markdown content attr

  • Example of using the nested content element:

            <markdown>
            <content>
## Getting Started
Follow these steps to begin:
1. Create an account
2. Verify your email
3. Start using the application

*Important:* Make sure to read the [documentation](https://docs.example.com).
            </content>
        </markdown>
    markdown content element
    When using the nested content element, avoid leading spaces at the beginning of each line. Markdown syntax is sensitive to indentation, and unexpected spaces may affect the rendering of formatted elements like headers, lists, and code blocks.

See Also

See the Vaadin Docs for more information.