Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/0xc3u/Indiko.Maui.Controls.Markdown
A Markdown Viewer component for maui.net
https://github.com/0xc3u/Indiko.Maui.Controls.Markdown
android dotnet ios markdown maui viewer
Last synced: 30 days ago
JSON representation
A Markdown Viewer component for maui.net
- Host: GitHub
- URL: https://github.com/0xc3u/Indiko.Maui.Controls.Markdown
- Owner: 0xc3u
- License: mit
- Created: 2024-02-15T07:09:59.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-10-30T09:40:57.000Z (about 1 month ago)
- Last Synced: 2024-10-30T10:33:03.703Z (about 1 month ago)
- Topics: android, dotnet, ios, markdown, maui, viewer
- Language: C#
- Homepage:
- Size: 8.5 MB
- Stars: 31
- Watchers: 1
- Forks: 7
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-dotnet-maui - Indiko.Maui.Controls.Markdown - formatted text within their MAUI.NET applications, providing a rich text experience.|[](https://github.com/0xc3u/Indiko.Maui.Controls.Markdown/stargazers)|[](https://github.com/0xc3u/Indiko.Maui.Controls.Markdown/commits) (UI)
README
# 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
[](https://www.nuget.org/packages/Indiko.Maui.Controls.Markdown/)
Available on [NuGet](http://www.nuget.org/packages/Indiko.Maui.Controls.Markdown).
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 and Placeholder Styling:** Customizes the appearance of horizontal lines and placeholder blocks 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.
- **PlaceholderBackgroundColor:** Sets the background color for placeholder elements, such as space between Markdown elements.
- **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 ``, 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.
```markdown
 // Image URL
 // Local file
 // 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.
```xml
xmlns:idk="clr-namespace:Indiko.Maui.Controls.Markdown.Markdown;assembly=Indiko.Maui.Controls.Markdown.Markdown"
...
```
Ensure to include the namespace reference for `MarkdownView` in your XAML or add the component programmatically in your C# code.