MarkdownView Component for MAUI.NET

The MarkdownView component is a versatile and customizable Markdown renderer designed for MAUI.NET applications. It allows developers to display Markdown-formatted text within their MAUI.NET applications, providing a rich text experience.

Build Status

Install Controls

Available on NuGet.

Install with the dotnet CLI: dotnet add package Indiko.Maui.Controls.Markdown, or through the NuGet Package Manager in Visual Studio.

Features

• Customizable Appearance: Offers extensive support for customizing text appearance, including font size, color, and line break modes for different Markdown elements.
• Bindable Properties: Enables dynamic updates and data binding for Markdown content and styling properties.
• Supported Markdown Elements: Renders basic Markdown elements, including headers, lists, block quotes, images, tables, and code blocks.
• Multiple Image Sources: The MarkdownView supports various sources for displaying images within Markdown content, including image URLs, local file paths, and base64 encoded strings. This flexibility allows for a wide range of image content to be seamlessly integrated into your Markdown text.
• Hyperlink Handling: Supports clickable hyperlinks with customizable color and command handling.
• Code Block Styling: Provides customizable styling for code blocks, including background color, border color, text color, font size, and font face.
• Block Quote Styling: Allows customization of block quote appearance, including background color, border color, text color, and font face.
• Line Styling: Customizes the appearance of horizontal lines between elements.

Bindable Properties

The MarkdownView component offers several bindable properties to customize the Markdown rendering:

• MarkdownText: The Markdown-formatted text to be displayed.
• LineBreakModeText: Controls the line break mode for regular text content.
• LineBreakModeHeader: Controls the line break mode for header elements (H1, H2, H3).
• H1Color, H2Color, H3Color: Sets the text color for H1, H2, and H3 headers, respectively.
• H1FontSize, H2FontSize, H3FontSize: Sets the font size for H1, H2, and H3 headers, respectively.
• TextColor: The default text color for the Markdown content.
• TextFontSize: The default font size for the Markdown content.
• TextFontFace: Sets the font family for the Markdown content.
• CodeBlockBackgroundColor: Customize the background color for code blocks.
• CodeBlockBorderColor: Customize the border color for code blocks.
• CodeBlockTextColor: Sets the text color for code blocks.
• CodeBlockFontSize: Sets the font size for code blocks.
• CodeBlockFontFace: Sets the font face for code blocks.
• LineColor: Sets the color for horizontal lines.
• BlockQuoteBackgroundColor: Sets the background color for block quotes.
• BlockQuoteBorderColor: Sets the border color for block quotes.
• BlockQuoteTextColor: Sets the text color for block quotes.
• BlockQuoteFontFace: Sets the font face for block quotes.
• HyperlinkColor: Sets the color for hyperlinks.
• LinkCommand: Command to execute when a hyperlink is clicked.
• LinkCommandParameter: Command parameter to pass when a hyperlink is clicked.

Supported Markdown Tags and Features

The MarkdownView supports a subset of Markdown elements and features, suitable for most text formatting needs:

• Headers (H1, H2, H3): Marked by #, ##, ### at the beginning of a line.
• Unordered Lists: Created with lines starting with -, *, or +.
• Ordered Lists: Created with lines starting with 1..
• Block Quotes: Denoted by lines starting with >.
• Images: Uses the Markdown image syntax ![alt text](image_url), where the URL can be an http(s) link, a local file path, or a base64 encoded string. This enables the embedding of images from various sources directly within the Markdown content.
• Code Blocks: Supports inline code with `code` and fenced code blocks with triple backticks ```.
• Table Support: Basic support for tables, with rows separated by | and headers separated by -.
• Horizontal Rules: Creates horizontal rules with lines containing ---, ***, or ___.

Image Support Details

• Image URLs: Direct links to images hosted online.
• Local File Paths: Path to an image file stored locally within the application's directories.
• Base64 Encoded Strings: A base64 encoded representation of an image, allowing for embedding image data directly within the Markdown string.

To include an image, simply use the standard Markdown image syntax with the desired source type. The MarkdownView component will automatically detect and handle the image source accordingly, ensuring that images are rendered correctly regardless of the source type.

![Alt text](http://example.com/image.jpg)  // Image URL
![Alt text](image.png)      // Local file
![Alt text](base64,...)     // Base64 encoded string

Platform supported

Platform	Minimum Version Supported
iOS	14.2+
Android	21+

Usage

To use the MarkdownView in your MAUI.NET application, include it in your XAML or C# code and bind or set the MarkdownText property to your Markdown-formatted string. Customize the appearance using the available bindable properties to match your application's design.

xmlns:idk="clr-namespace:Indiko.Maui.Controls.Markdown.Markdown;assembly=Indiko.Maui.Controls.Markdown.Markdown"

...

<idk:MarkdownView MarkdownText="{Binding YourMarkdownContent}" />

Ensure to include the namespace reference for MarkdownView in your XAML or add the component programmatically in your C# code.