# Markdown The Markdown widget renders Markdown-formatted text into styled text. It supports a wide range of Markdown features, including headings, lists, links, code blocks, and more. This is a great way to display rich text content in your app without having to manually style each element. {% embed url="" %} Watch this on Youtube: ### Core Concepts Instead of building complex rich text layouts manually, you provide a **Markdown string**, and the widget: 1. **Parses** the Markdown syntax 2. **Applies styles** based on your configuration (theme properties) 3. **Renders** it as a fully styled, interactive text view You can control both: * **How it behaves** → via **Markdown Settings** * **How it looks** → via **Markdown Theme** ### Properties #### 1. Markdown Settings These properties control **content, behavior, and interaction** of the Markdown widget. | Property | Description | | --------------------------- | ---------------------------------------------------------------------------------------- | | `data` | The Markdown-formatted string to be rendered. This is the main content of the widget. | | `duration` | The duration of the animation when the content changes. Used when animation is enabled. | | `shrinkWrap` | If `true`, the widget will shrink to fit its content instead of expanding to fill space. | | `selectable` | If `true`, the rendered text can be selected and copied by the user. | | `animationEnabled` | If `true`, the widget animates when the content changes (e.g., fade or transition). | | `onLinkTap` | Action to be executed when a link in the Markdown content is tapped. | | `hrHeight` | The height (thickness) of horizontal rules (`---` or `***` lines in Markdown). | | `hrColor` | The color of horizontal rules. | | `h1TextStyle`–`h6TextStyle` | Text styles for each heading level (`#` to `######`). | | `codeTextStyle` | The text style for inline code (e.g., `` `code` ``). | | `pTextStyle` | The text style used for paragraph text. | | `linkTextStyle` | The text style for links, often including color and underline. | These settings define **what content is rendered**, how it behaves when it changes, and how basic text elements (headings, links, paragraphs, inline code) are styled. #### 2. Markdown Theme These properties control the **visual theme** for lists, blockquotes, and preformatted/code blocks.\ They start from `listMarginLeft` onward. | Property | Description | | ------------------ | ----------------------------------------------------------------------------------------------- | | `listMarginLeft` | Left margin applied to lists (bulleted or numbered). Controls how far lists are indented. | | `listMarginBottom` | Bottom margin below lists. Controls spacing between a list and the next element. | | `blockSideColor` | The color of the side border for blockquotes (usually a vertical bar on the left). | | `blockTextColor` | The text color used inside blockquotes. | | `blockSideWidth` | The width (thickness) of the blockquote side border. | | `blockPadding` | Inner padding for blockquotes. Controls the space between the border and the text. | | `blockMargin` | Outer margin around blockquotes. Controls spacing between blockquotes and surrounding content. | | `prePadding` | Inner padding for preformatted text/code blocks. | | `preMargin` | Outer margin for preformatted text blocks. | | `preColor` | Background color for preformatted text/code blocks. | | `preBorderRadius` | Corner radius for preformatted text blocks, used to create rounded code blocks. | | `preTextStyle` | Text style for preformatted text/code blocks (monospace fonts, size, color, etc.). | | `preLanguage` | Language of the code in preformatted blocks, used for syntax highlighting (e.g., `dart`, `js`). | These properties let you create a consistent **Markdown theme** that matches your app’s visual identity, especially for: * Lists * Blockquotes * Code blocks ### Default Properties The Markdown widget supports all [Default Properties](/ui-building-blocks/widgets/default-properties.md). ### Use Cases The **Markdown** widget is used to render **rich formatted text** from Markdown input (like `# Heading`, `**bold**`, `- lists`, etc.). Use **Markdown** when you want to: * **Show content managed by non-developers** * Blog posts, help articles, FAQs, release notes * Content coming from CMS or backend in Markdown format * **Display developer-friendly or docs-style text** * API docs, technical guides, changelogs * README-like sections inside your app * **Render dynamic rich text safely** * User-generated descriptions, comments, or notes written in Markdown * Admin-configurable content (terms, policies, feature highlights) * **Avoid building complex rich text layouts manually** * Quickly get headings, bold, italics, code blocks, quotes, and lists * Ideal for long-form text with structure and styling baked in ### Best Practices * Use the `onLinkTap` action to handle links in your Markdown content. * Use the text style properties to customize the appearance of your Markdown content to match your app's design. * For large amounts of Markdown content, consider using a `SingleChildScrollView` to make it scrollable. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.digia.tech/ui-building-blocks/widgets/content-display-widgets/markdown.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.