> For the complete documentation index, see [llms.txt](https://docs.digia.tech/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.digia.tech/ui-building-blocks/widgets/content-display-widgets/markdown.md).

# 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="<https://youtu.be/a6U6jJYgIPU?si=XAsQpH4dx7rLayem>" %}

Watch this on Youtube: <https://www.youtube.com/watch?v=a6U6jJYgIPU>

### 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.