diff --git a/content/en/docs/marketplace/platform-supported-content/widgets/markdown-viewer.md b/content/en/docs/marketplace/platform-supported-content/widgets/markdown-viewer.md new file mode 100644 index 00000000000..78b460b27c8 --- /dev/null +++ b/content/en/docs/marketplace/platform-supported-content/widgets/markdown-viewer.md @@ -0,0 +1,73 @@ +--- +title: "Markdown Viewer" +url: /appstore/widgets/markdown-viewer/ +description: "Describes the configuration and usage of the Markdown Viewer widget, which is available in the Mendix Marketplace." +#If moving or renaming this doc file, implement a temporary redirect and let the respective team know they should update the URL in the product. See Mapping to Products for more details. +--- + +## Introduction + +The [Markdown Viewer](https://marketplace.mendix.com/link/component/230248/) widget renders markdown content from a string attribute as formatted HTML. + +The widget does the following: + +- Displays markdown-formatted text as rendered HTML, supporting headings, bold, italic, lists, links, images, tables, code blocks, blockquotes, and horizontal rules +- Applies typographic enhancements such as smart quotes, em dashes, en dashes, and ellipses +- Automatically converts URLs in the text to clickable links +- Shows a loading indicator while the data source is being retrieved + +### Typical Use Cases + +This widget is often used in use cases like: + +- Displaying user-authored markdown content such as knowledge base articles or notes +- Rendering formatted text stored in a database attribute +- Showing `README.md`-style documentation within a Mendix application + +### Features + +This widget leverages the following features: + +- Standard markdown syntax rendering, including headings, emphasis, lists, links, images, tables, code blocks, blockquotes, and horizontal rules +- Typographic replacements (smart quotes, em dashes, en dashes, ellipses) +- Automatic URL-to-link conversion (linkification) +- Offline capable +- Conditional visibility support + +### Limitations + +This widget has the following limitations: + +- The widget is read-only, and does not provide editing or input capabilities +- Code blocks render as plain monospace text without syntax highlighting +- Custom HTML tags within markdown content are not supported + +## Configuration + +To configure the markdown viewer widget, do the following: + +1. Place the widget in a data container such as a data view, list view, or template grid widget. +1. Navigate to the **General** tab and select the **Value attribute** to use as the content source. This attribute contains the markdown-formatted text to render. + +{{% alert color="info" %}} +Use an unlimited string data type for the **Value attribute** to avoid truncation of longer markdown content. +{{% /alert %}} + +Optionally, you can configure the widget further: + +- Navigate to the **Label** section to add a label for the widget +- Navigate to the **Conditional visibility** section to control when the widget is displayed + +## Styling + +The widget renders its content inside a container with the `widget-markdown` CSS class. The following default styles are applied: + +- **Tables** — rendered with borders, padding, and left-aligned text. Header cells have a light gray background +- **Images** — render at a maximum of 35% of the container width by default +- **Horizontal rules** — span the full width of the container + +You can override these styles by targeting the `.widget-markdown` class in your custom SCSS or theme. + +## Read More + +- [markdown-it](https://github.com/markdown-it/markdown-it): the markdown parsing library used by this widget