The MarkdownView
control is a flexible component designed for MAUI applications to display and style Markdown content with ease. This control supports various Markdown syntax elements such as headings, blockquotes, code blocks, images, tables, and hyperlinks. It offers extensive customization options via bindable properties and allows you to tailor the appearance of different Markdown elements, making it perfect for integrating rich text content into your app.
You can install the Indiko.Maui.Controls.Markdown
package via NuGet Package Manager or CLI:
Install-Package Indiko.Maui.Controls.Markdown
dotnet add package Indiko.Maui.Controls.Markdown
The following is a list of all customizable bindable properties:
H1FontSize
: The font size for H1 headings (default: 24
).H1Color
: The color for H1 headings (default: Black
).H2FontSize
: The font size for H2 headings (default: 20
).H2Color
: The color for H2 headings (default: DarkGray
).H3FontSize
: The font size for H3 headings (default: 18
).H3Color
: The color for H3 headings (default: Gray
).TextFontSize
: The font size for regular text (default: 12
).TextColor
: The color for regular text (default: Black
).TextFontFace
: The font family for regular text.LineBreakModeText
: Line break mode for text (default: WordWrap
).LineBreakModeHeader
: Line break mode for headers (default: TailTruncation
).BlockQuoteBackgroundColor
: The background color for blockquote elements (default: LightGray
).BlockQuoteBorderColor
: The border color for blockquote elements (default: BlueViolet
).BlockQuoteTextColor
: The text color for blockquotes (default: BlueViolet
).BlockQuoteFontFace
: The font family for blockquote text.CodeBlockBackgroundColor
: The background color for code blocks (default: LightGray
).CodeBlockBorderColor
: The border color for code blocks (default: BlueViolet
).CodeBlockTextColor
: The text color for code blocks (default: BlueViolet
).CodeBlockFontFace
: The font family for code blocks.CodeBlockFontSize
: The font size for code blocks (default: 12
).TableHeaderFontSize
: The font size for table headers (default: 14
).TableHeaderTextColor
: The text color for table headers (default: Black
).TableHeaderBackgroundColor
: The background color for table headers (default: LightGray
).TableHeaderFontFace
: The font family for table headers.TableRowFontSize
: The font size for table rows (default: 12
).TableRowTextColor
: The text color for table rows (default: Black
).TableRowFontFace
: The font family for table rows.ImageAspect
: The aspect ratio for images (default: AspectFit
).HyperlinkColor
: The color for hyperlinks (default: BlueViolet
).LinkCommand
: A command to execute when a hyperlink is clicked.LinkCommandParameter
: A parameter to pass when the hyperlink command is executed.LineColor
: The color for horizontal rules (default: LightGray
).Headings: MarkdownView supports headings from H1
to H6
.
# H1
## H2
### H3
Bold: Wrap text with **
or __
to make it bold.
**Bold Text**
__Bold Text__
Italic: Wrap text with *
or _
to make it italic.
*Italic Text*
_Italic Text_
Strikethrough: Wrap text with ~~
to create strikethrough text.
~~Strikethrough Text~~
Blockquotes: Add >
before a paragraph to create a blockquote.
> This is a blockquote.
Code Blocks: Enclose code in triple backticks (```) for multi-line code blocks, or single backticks for inline code.
`Inline code`
Multi-line code block
Lists:
-
, *
, or +
to create an unordered list.- Item 1
- Item 2
1. Item 1
2. Item 2
Tables: Create tables using pipes (|
) to separate columns. You can also specify text alignment for table columns using colons (:
).
| Header 1 | Header 2 | Header 3 |
|:------------- |:-------------:| -------------:|
| Left aligned | Center aligned| Right aligned |
| Row 1 | Data 1 | Data 1 |
| Row 2 | Data 2 | Data 2 |
In the above example:
Horizontal Rule: Use ---
, ***
, or ___
for horizontal rules.
---
Images: The control supports image URLs, local files, and base64 encoded images.
![Alt text](http://example.com/image.jpg) // Image URL
![Alt text](image.png) // Local file
![Alt text](data:image/png;base64,...) // Base64 encoded string
Hyperlinks: Create hyperlinks using the following format:
[Link Text](http://example.com)
The MarkdownView
supports various sources for displaying images:
The ImageAspect
property allows you to customize how images are displayed within the control.
You can respond to hyperlinks in Markdown content using the LinkCommand
and OnHyperLinkClicked
event. Hyperlinks will also display with the color specified by the HyperlinkColor
property.
Here’s an example of how to use the MarkdownView
in your XAML:
<idk:MarkdownView
MarkdownText="{Binding MarkdownText}"
H1FontSize="20"
H1Color="{StaticResource Blue100Accent}"
H2FontSize="18"
H2Color="{StaticResource Blue200Accent}"
H3FontSize="16"
H3Color="{StaticResource Blue300Accent}"
CodeBlockBackgroundColor="{StaticResource GrayQuote}"
CodeBlockTextColor="{StaticResource Gray600}"
CodeBlockBorderColor="{StaticResource GrayQuoteBorder}"
CodeBlockFontFace="CamingoCodeRegular"
CodeBlockFontSize="12"
BlockQuoteBackgroundColor="{StaticResource Yellow300Accent}"
BlockQuoteTextColor="{StaticResource Gray600}"
BlockQuoteBorderColor="{StaticResource Yellow100Accent}"
BlockQuoteFontFace="CamingoCodeItalic"
TextFontFace="OpenSans"
TextFontSize="13"
TextColor="{StaticResource Black}"
TableHeaderBackgroundColor="{StaticResource Gray100}"
TableHeaderFontFace="OpenSans"
TableHeaderFontSize="13"
TableHeaderTextColor="{StaticResource Gray900}"
TableRowFontFace="OpenSans"
TableRowFontSize="11"
TableRowTextColor="{StaticResource Gray600}"
ImageAspect="Fill"
HyperlinkColor="{StaticResource Blue100Accent}"
LineColor="{StaticResource GrayQuoteBorder}"
LinkCommand="{Binding LinkReceivedCommand}"
OnHyperLinkClicked="MarkdownView_HyperLinkClicked">
</idk:MarkdownView>
Here’s an example of how to use the MarkdownView
in your c#:
var markdownView = new MarkdownView
{
MarkdownText = "# Welcome to MarkdownView\n" +
"This is **bold text**, and this is *italic text*.\n\n" +
"Here's a blockquote:\n\n" +
"> This is a blockquote\n\n" +
"Here's a list:\n" +
"- Item 1\n" +
"- Item 2\n\n" +
"Here's a code block:\n\n" +
"```\n" +
"var code = \"This is a code block\";\n" +
"```\n\n" +
"Here's a link: [Click here](https://example.com)\n\n" +
"Here's an image:\n" +
"![Alt text](https://example.com/image.jpg)\n",
H1FontSize = 24,
H1Color = Colors.Blue,
H2FontSize = 20,
H2Color = Colors.DarkGray,
H3FontSize = 18,
H3Color = Colors.Gray,
TextFontSize = 14,
TextColor = Colors.Black,
BlockQuoteBackgroundColor = Colors.LightYellow,
BlockQuoteTextColor = Colors.Gray,
BlockQuoteBorderColor = Colors.DarkGray,
CodeBlockBackgroundColor = Colors.LightGray,
CodeBlockTextColor = Colors.Purple,
CodeBlockFontSize = 12,
CodeBlockFontFace = "Consolas",
HyperlinkColor = Colors.BlueViolet,
LineColor = Colors.Gray,
ImageAspect = Aspect.AspectFit,
TableHeaderBackgroundColor = Colors.LightGray,
TableHeaderFontSize = 14,
TableHeaderTextColor = Colors.Black,
TableRowFontSize = 12,
TableRowTextColor = Colors.DarkGray
};
markdownView.OnHyperLinkClicked += (sender, e) =>
{
DisplayAlert("Link Clicked", $"You clicked on: {e.Url}", "OK");
};
Contributions to the MarkdownView
project are very welcome! Whether you want to add new features, improve existing ones, fix bugs, or enhance documentation, your help is highly appreciated.
git checkout -b feature/new-feature
git commit -m "Add support for new markdown feature"
git push origin feature/new-feature
We encourage contributions that enhance the control, such as:
If you have any ideas or questions about contributing, feel free to open an issue on GitHub to discuss it with the maintainers.
We look forward to your contributions!