docs: add markdown documentation

articles/components/index.adoc

@@ -471,6 +471,15 @@ Over 600 built-in icons for business applications.
 [.sr-only]
 <<{components-path-prefix}icons#, See Icons>>
 
+[.component-card]
+=== Markdown
+
+image::{components-path-prefix}markdown/markdown.png["", opts=inline, role="banner"]
+
+include::markdown/index.adoc[tag=description]
+
+[.sr-only]
+<<{components-path-prefix}markdown#,See Markdown>>
 
 ifdef::flow[]
 [.component-card.commercial]

articles/components/markdown/index.adoc

@@ -0,0 +1,47 @@
+---
+title: Markdown
+page-title: Markdown component | Vaadin components
+description: Markdown allows you to render Markdown content in your application with support for basic formatting, lists, links, and more.
+meta-description: Use the Vaadin Markdown component to display Markdown formatted content in Vaadin applications.
+page-links:
+  - 'API: https://cdn.vaadin.com/vaadin-web-components/{moduleNpmVersion:@vaadin/markdown}/#/elements/vaadin-markdown[TypeScript] / https://vaadin.com/api/platform/{moduleMavenVersion:com.vaadin:vaadin}/com/vaadin/flow/component/markdown/Markdown.html[Java]'
+  - 'Source: https://github.com/vaadin/web-components/tree/v{moduleNpmVersion:@vaadin/markdown}/packages/markdown[TypeScript] / https://github.com/vaadin/flow-components/tree/{moduleMavenVersion:com.vaadin:vaadin}/vaadin-markdown-flow-parent[Java]'
+version: since:com.vaadin:[email protected]
+---
+= [since:com.vaadin:[email protected]]#Markdown#
+
+// tag::description[]
+Markdown component allows the user to display formatted text content using the Markdown syntax.
+// end::description[]
+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 https://www.markdownguide.org/basic-syntax/[Markdown Guide].
+
+
+[.example]
+--
+
+ifdef::lit[]
+[source,html]
+----
+include::{root}/frontend/demo/component/markdown/markdown-basic.ts[render,tags=snippet,indent=0,group=Lit]
+----
+endif::[]
+
+ifdef::flow[]
+[source,java]
+----
+include::{root}/src/main/java/com/vaadin/demo/component/markdown/MarkdownBasic.java[render,tags=snippet,indent=0,group=Flow]
+----
+endif::[]
+
+ifdef::react[]
+[source,tsx]
+----
+include::{root}/frontend/demo/component/markdown/react/markdown-basic.tsx[render,tags=snippet,indent=0,group=React]
+----
+endif::[]
+
+--
+
+[discussion-id]`77B51D28-FE42-4829-A315-D0F3C8A55BED`

frontend/demo/component/markdown/markdown-basic.ts

@@ -0,0 +1,49 @@
+import '@vaadin/markdown';
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { applyTheme } from 'Frontend/generated/theme';
+
+@customElement('markdown-basic')
+export class MarkdownBasic extends LitElement {
+  protected override createRenderRoot() {
+    const root = super.createRenderRoot();
+    // Apply custom theme (only supported if your app uses one)
+    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[]
+  }
+}

frontend/demo/component/markdown/react/markdown-basic.tsx

@@ -0,0 +1,40 @@
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+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[]
+}
+
+export default reactExample(Example); // hidden-source-line

src/main/java/com/vaadin/demo/component/markdown/MarkdownBasic.java

@@ -0,0 +1,49 @@
+package com.vaadin.demo.component.markdown;
+
+import com.vaadin.demo.DemoExporter;
+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[]
+    }
+
+    public static class Exporter extends DemoExporter<MarkdownBasic> { // hidden-source-line
+    } // hidden-source-line
+}