{"id":28287023,"url":"https://github.com/0xc3u/indiko.maui.controls.markdown","last_synced_at":"2026-01-16T19:41:47.728Z","repository":{"id":222607906,"uuid":"757879189","full_name":"0xc3u/Indiko.Maui.Controls.Markdown","owner":"0xc3u","description":"A Markdown Viewer component for maui.net","archived":false,"fork":false,"pushed_at":"2025-06-11T16:17:37.000Z","size":8959,"stargazers_count":61,"open_issues_count":2,"forks_count":14,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-06-14T13:44:36.671Z","etag":null,"topics":["android","dotnet","ios","katex","markdown","maui","viewer"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/0xc3u.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"0xc3u"}},"created_at":"2024-02-15T07:09:59.000Z","updated_at":"2025-06-11T16:17:39.000Z","dependencies_parsed_at":"2024-02-15T08:26:24.884Z","dependency_job_id":"0e67f8cf-fefa-4974-a228-8a1c61716a6d","html_url":"https://github.com/0xc3u/Indiko.Maui.Controls.Markdown","commit_stats":null,"previous_names":["0xc3u/indiko.maui.controls.markdown"],"tags_count":32,"template":false,"template_full_name":null,"purl":"pkg:github/0xc3u/Indiko.Maui.Controls.Markdown","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xc3u%2FIndiko.Maui.Controls.Markdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xc3u%2FIndiko.Maui.Controls.Markdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xc3u%2FIndiko.Maui.Controls.Markdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xc3u%2FIndiko.Maui.Controls.Markdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/0xc3u","download_url":"https://codeload.github.com/0xc3u/Indiko.Maui.Controls.Markdown/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xc3u%2FIndiko.Maui.Controls.Markdown/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260488401,"owners_count":23016906,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","dotnet","ios","katex","markdown","maui","viewer"],"created_at":"2025-05-21T22:10:59.330Z","updated_at":"2026-01-16T19:41:47.721Z","avatar_url":"https://github.com/0xc3u.png","language":"C#","funding_links":["https://github.com/sponsors/0xc3u"],"categories":[],"sub_categories":[],"readme":"![Indiko.Maui.Controls.Markdown](nuget.png)\n\n# Indiko.Maui.Controls.Markdown\n\nThe `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.\n\n![markdownview_screenshots](https://github.com/user-attachments/assets/2485eedb-015d-4ccb-acc2-c19d24ea51d7)\n\n## Build Status\n![ci](https://github.com/0xc3u/Indiko.Maui.Controls.Markdown/actions/workflows/ci.yml/badge.svg)\n\n## ⚠️ Breaking Changes\n\n### Version 1.5.0 and above\n\nVersion 1.5.0 introduces a new **Theming System** that changes how styling is applied to the MarkdownView. If you are upgrading from a version prior to 1.4.0, please note the following changes:\n\n#### New Theme Property\n- A new `Theme` property has been added that accepts a `MarkdownTheme` object\n- The `UseAppTheme` property enables automatic light/dark mode switching based on system theme\n\n#### New Heading Properties\n- Individual `FontFamily` and `FontAttributes` properties have been added for each heading level (H1-H6)\n- New properties: `H1FontFamily`, `H1FontAttributes`, `H2FontFamily`, `H2FontAttributes`, etc.\n- New heading colors for H4-H6: `H4Color`, `H5Color`, `H6Color`\n\n#### Migration Guide\n\n**Before (\u003c 1.5.0):**\n```xml\n\u003cidk:MarkdownView \n    H1Color=\"Blue\"\n    H1FontSize=\"24\"\n    TextFontFace=\"Arial\" /\u003e\n```\n\n**After (\u003e= 1.5.0) - Using Theme (Recommended):**\n```xml\n\u003cidk:MarkdownView \n    Theme=\"{Binding CurrentTheme}\"\n    UseAppTheme=\"True\" /\u003e\n```\n\n```csharp\n// In your ViewModel or code-behind\nCurrentTheme = MarkdownThemeDefaults.GitHub;\n```\n\n**After (\u003e= 1.5.0) - Using Individual Properties (Still Supported):**\n```xml\n\u003cidk:MarkdownView \n    H1Color=\"Blue\"\n    H1FontSize=\"24\"\n    H1FontFamily=\"Arial\"\n    H1FontAttributes=\"Bold\"\n    TextFontFace=\"Arial\" /\u003e\n```\n\n\u003e **Note:** The existing individual styling properties (like `H1Color`, `H1FontSize`, etc.) are still fully supported. The new theming system is an additional feature that provides a more organized way to manage styles. You can continue using individual properties if you prefer.\n\n---\n\n## Installation\n\nYou can install the `Indiko.Maui.Controls.Markdown` package via NuGet Package Manager or CLI:\n\n[![NuGet](https://img.shields.io/nuget/v/Indiko.Maui.Controls.Markdown.svg?label=NuGet)](https://www.nuget.org/packages/Indiko.Maui.Controls.Markdown/)\n\n### NuGet Package Manager\n```bash\nInstall-Package Indiko.Maui.Controls.Markdown\n```\n\n### .NET CLI\n```bash\ndotnet add package Indiko.Maui.Controls.Markdown\n```\n\n## Theming Support\n\nThe `MarkdownView` control includes a powerful theming system inspired by MudBlazor's approach. Themes allow you to define a complete visual style for your markdown content, including colors, typography, and spacing, all in one reusable object.\n\n### Theme Structure\n\nA theme consists of three main components:\n\n- **`Palette`**: Color palette for light mode\n- **`PaletteDark`**: Color palette for dark mode (optional, falls back to Palette)\n- **`Typography`**: Font sizes, font families, line heights, and spacing\n\n### Using Built-in Themes\n\nThe library includes several pre-built themes that you can use out of the box:\n\n| Theme | Description |\n|-------|-------------|\n| `Light` | Default light theme with neutral colors |\n| `Dark` | Dark theme optimized for dark backgrounds |\n| `GitHub` | GitHub-styled markdown appearance |\n| `OneDark` | Atom's One Dark syntax theme |\n| `OneLight` | Atom's One Light syntax theme |\n| `Dracula` | Popular Dracula color scheme |\n| `Nord` | Arctic, north-bluish color palette |\n| `Sepia` | Warm, paper-like reading experience |\n| `Compact` | Reduced font sizes and spacing |\n| `HighContrast` | High contrast for accessibility |\n| `DotNetPurple` | .NET brand purple colors |\n\n#### Using a Built-in Theme in C#\n\n```csharp\nusing Indiko.Maui.Controls.Markdown.Theming;\n\n// Apply a built-in theme\nmarkdownView.Theme = MarkdownThemeDefaults.GitHub;\n\n// Enable automatic light/dark mode switching\nmarkdownView.UseAppTheme = true;\n```\n\n#### Using a Built-in Theme in XAML with Binding\n\n```xml\n\u003cContentPage xmlns:idk=\"clr-namespace:Indiko.Maui.Controls.Markdown;assembly=Indiko.Maui.Controls.Markdown\"\n             xmlns:theming=\"clr-namespace:Indiko.Maui.Controls.Markdown.Theming;assembly=Indiko.Maui.Controls.Markdown\"\u003e\n    \n    \u003cidk:MarkdownView \n        MarkdownText=\"{Binding MarkdownText}\" \n        Theme=\"{Binding CurrentTheme}\"\n        UseAppTheme=\"True\" /\u003e\n\u003c/ContentPage\u003e\n```\n\n```csharp\n// In your ViewModel\npublic MarkdownTheme CurrentTheme { get; set; } = MarkdownThemeDefaults.GitHub;\n\n// Switch themes dynamically\npublic void SwitchToOneDark()\n{\n    CurrentTheme = MarkdownThemeDefaults.OneDark;\n}\n```\n\n### Creating Custom Themes\n\nYou can create fully custom themes by defining your own palette and typography settings.\n\n#### Custom Theme in C#\n\n```csharp\nusing Indiko.Maui.Controls.Markdown.Theming;\n\nvar customTheme = new MarkdownTheme();\n\n// Customize light palette\ncustomTheme.Palette.TextPrimary = Color.FromArgb(\"#333333\");\ncustomTheme.Palette.H1Color = Color.FromArgb(\"#1a73e8\");\ncustomTheme.Palette.H2Color = Color.FromArgb(\"#1557b0\");\ncustomTheme.Palette.H3Color = Color.FromArgb(\"#0d47a1\");\ncustomTheme.Palette.HyperlinkColor = Color.FromArgb(\"#1a73e8\");\ncustomTheme.Palette.CodeBlockBackground = Color.FromArgb(\"#f5f5f5\");\ncustomTheme.Palette.CodeBlockText = Color.FromArgb(\"#d32f2f\");\ncustomTheme.Palette.BlockQuoteBackground = Color.FromArgb(\"#e3f2fd\");\ncustomTheme.Palette.BlockQuoteBorder = Color.FromArgb(\"#1a73e8\");\n\n// Customize dark palette\ncustomTheme.PaletteDark.TextPrimary = Color.FromArgb(\"#e0e0e0\");\ncustomTheme.PaletteDark.H1Color = Color.FromArgb(\"#8ab4f8\");\ncustomTheme.PaletteDark.H2Color = Color.FromArgb(\"#669df6\");\ncustomTheme.PaletteDark.H3Color = Color.FromArgb(\"#4285f4\");\ncustomTheme.PaletteDark.HyperlinkColor = Color.FromArgb(\"#8ab4f8\");\ncustomTheme.PaletteDark.CodeBlockBackground = Color.FromArgb(\"#1e1e1e\");\ncustomTheme.PaletteDark.CodeBlockText = Color.FromArgb(\"#f48fb1\");\n\n// Customize typography\ncustomTheme.Typography.H1FontSize = 32;\ncustomTheme.Typography.H2FontSize = 26;\ncustomTheme.Typography.H3FontSize = 22;\ncustomTheme.Typography.BodyFontSize = 16;\ncustomTheme.Typography.CodeFontSize = 14;\ncustomTheme.Typography.CodeFontFamily = \"Cascadia Code\";\ncustomTheme.Typography.LineHeight = 1.6;\ncustomTheme.Typography.ParagraphSpacing = 1.2;\n\n// Apply the theme\nmarkdownView.Theme = customTheme;\n```\n\n#### Custom Theme in XAML\n\nYou can define themes as resources in XAML for reuse across your application:\n\n```xml\n\u003cContentPage.Resources\u003e\n    \u003ctheming:MarkdownTheme x:Key=\"MyCustomTheme\"\u003e\n        \u003ctheming:MarkdownTheme.Palette\u003e\n            \u003ctheming:MarkdownPalette \n                TextPrimary=\"#333333\"\n                H1Color=\"#1a73e8\"\n                H2Color=\"#1557b0\"\n                H3Color=\"#0d47a1\"\n                HyperlinkColor=\"#1a73e8\"\n                CodeBlockBackground=\"#f5f5f5\"\n                CodeBlockBorder=\"#e0e0e0\"\n                CodeBlockText=\"#d32f2f\"\n                BlockQuoteBackground=\"#e3f2fd\"\n                BlockQuoteBorder=\"#1a73e8\"\n                BlockQuoteText=\"#666666\"\n                TableHeaderBackground=\"#e8e8e8\"\n                TableHeaderText=\"#333333\"\n                TableRowBackground=\"White\"\n                TableRowText=\"#333333\"\n                DividerColor=\"#e0e0e0\" /\u003e\n        \u003c/theming:MarkdownTheme.Palette\u003e\n        \u003ctheming:MarkdownTheme.PaletteDark\u003e\n            \u003ctheming:MarkdownPaletteDark \n                TextPrimary=\"#e0e0e0\"\n                H1Color=\"#8ab4f8\"\n                H2Color=\"#669df6\"\n                H3Color=\"#4285f4\"\n                HyperlinkColor=\"#8ab4f8\"\n                CodeBlockBackground=\"#1e1e1e\"\n                CodeBlockBorder=\"#333333\"\n                CodeBlockText=\"#f48fb1\"\n                BlockQuoteBackground=\"#1e1e1e\"\n                BlockQuoteBorder=\"#8ab4f8\"\n                BlockQuoteText=\"#9e9e9e\" /\u003e\n        \u003c/theming:MarkdownTheme.PaletteDark\u003e\n        \u003ctheming:MarkdownTheme.Typography\u003e\n            \u003ctheming:MarkdownTypography \n                H1FontSize=\"32\"\n                H2FontSize=\"26\"\n                H3FontSize=\"22\"\n                BodyFontSize=\"16\"\n                CodeFontSize=\"14\"\n                LineHeight=\"1.6\"\n                CodeFontFamily=\"Consolas\" /\u003e\n        \u003c/theming:MarkdownTheme.Typography\u003e\n    \u003c/theming:MarkdownTheme\u003e\n\u003c/ContentPage.Resources\u003e\n\n\u003cidk:MarkdownView \n    MarkdownText=\"{Binding MarkdownText}\" \n    Theme=\"{StaticResource MyCustomTheme}\"\n    UseAppTheme=\"True\" /\u003e\n```\n\n### Palette Properties\n\nThe `MarkdownPalette` class contains the following color properties:\n\n| Property | Description |\n|----------|-------------|\n| `Primary` | Primary accent color |\n| `Secondary` | Secondary accent color |\n| `Background` | Default background color |\n| `Surface` | Surface color for elevated elements |\n| `TextPrimary` | Primary text color |\n| `TextSecondary` | Secondary text color |\n| `TextDisabled` | Disabled text color |\n| `H1Color` | Color for H1 headings |\n| `H2Color` | Color for H2 headings |\n| `H3Color` | Color for H3 headings |\n| `H4Color` | Color for H4 headings |\n| `H5Color` | Color for H5 headings |\n| `H6Color` | Color for H6 headings |\n| `HyperlinkColor` | Color for hyperlinks |\n| `CodeBlockBackground` | Background color for code blocks |\n| `CodeBlockBorder` | Border color for code blocks |\n| `CodeBlockText` | Text color for code blocks |\n| `BlockQuoteBackground` | Background color for block quotes |\n| `BlockQuoteBorder` | Border color for block quotes |\n| `BlockQuoteText` | Text color for block quotes |\n| `TableHeaderBackground` | Background color for table headers |\n| `TableHeaderText` | Text color for table headers |\n| `TableRowBackground` | Background color for table rows |\n| `TableRowText` | Text color for table rows |\n| `TableBorder` | Border color for tables |\n| `DividerColor` | Color for horizontal rules |\n| `InfoColor` | Color for info alerts |\n| `WarningColor` | Color for warning alerts |\n| `ErrorColor` | Color for error alerts |\n| `SuccessColor` | Color for success alerts |\n\nThe palette also provides a helper method:\n- `GetHeadingColor(int level)` - Returns the appropriate color for heading levels 1-6\n\n### Typography Properties\n\nThe `MarkdownTypography` class contains the following properties:\n\n| Property | Description | Default |\n|----------|-------------|---------|\n| `DefaultFontFamily` | Default font family for body text | null |\n| `HeadingFontFamily` | Default font family for all headings (can be overridden per level) | null |\n| `CodeFontFamily` | Font family for code | \"Consolas\" |\n| `BlockQuoteFontFamily` | Font family for block quotes | \"Consolas\" |\n| `H1FontSize` | Font size for H1 | 28 |\n| `H1FontFamily` | Font family for H1 (overrides HeadingFontFamily) | null |\n| `H1FontAttributes` | Font attributes for H1 (None, Bold, Italic) | Bold |\n| `H2FontSize` | Font size for H2 | 24 |\n| `H2FontFamily` | Font family for H2 (overrides HeadingFontFamily) | null |\n| `H2FontAttributes` | Font attributes for H2 | Bold |\n| `H3FontSize` | Font size for H3 | 20 |\n| `H3FontFamily` | Font family for H3 (overrides HeadingFontFamily) | null |\n| `H3FontAttributes` | Font attributes for H3 | Bold |\n| `H4FontSize` | Font size for H4 | 18 |\n| `H4FontFamily` | Font family for H4 (overrides HeadingFontFamily) | null |\n| `H4FontAttributes` | Font attributes for H4 | Bold |\n| `H5FontSize` | Font size for H5 | 16 |\n| `H5FontFamily` | Font family for H5 (overrides HeadingFontFamily) | null |\n| `H5FontAttributes` | Font attributes for H5 | Bold |\n| `H6FontSize` | Font size for H6 | 14 |\n| `H6FontFamily` | Font family for H6 (overrides HeadingFontFamily) | null |\n| `H6FontAttributes` | Font attributes for H6 | Bold |\n| `BodyFontSize` | Font size for body text | 14 |\n| `CodeFontSize` | Font size for code | 13 |\n| `TableHeaderFontSize` | Font size for table headers | 14 |\n| `TableRowFontSize` | Font size for table rows | 13 |\n| `LineHeight` | Line height multiplier | 1.5 |\n| `HeadingLineHeight` | Line height for headings | 1.3 |\n| `ParagraphSpacing` | Spacing between paragraphs | 1.0 |\n| `ListItemSpacing` | Spacing between list items | 4 |\n| `ListIndent` | Indentation for nested lists | 20 |\n| `TextLineBreakMode` | Line break mode for text | WordWrap |\n| `HeadingLineBreakMode` | Line break mode for headings | TailTruncation |\n\n### Automatic Light/Dark Mode\n\nSet `UseAppTheme=\"True\"` to automatically switch between `Palette` (light mode) and `PaletteDark` (dark mode) based on the system theme:\n\n```xml\n\u003cidk:MarkdownView \n    Theme=\"{Binding CurrentTheme}\"\n    UseAppTheme=\"True\" /\u003e\n```\n\nWhen the system theme changes, the MarkdownView will automatically re-render with the appropriate palette.\n\n### Cloning and Modifying Themes\n\nYou can clone an existing theme and modify it:\n\n```csharp\n// Clone a built-in theme and customize it\nvar myTheme = MarkdownThemeDefaults.GitHub.Clone();\nmyTheme.Palette.HyperlinkColor = Colors.Orange;\nmyTheme.Typography.H1FontSize = 36;\n\nmarkdownView.Theme = myTheme;\n```\n\n---\n\n## Bindable Properties\n\nThe following is a list of all customizable bindable properties:\n\n### Theme\n- **`Theme`**: A `MarkdownTheme` object that defines the complete visual style (colors, typography, spacing).\n- **`UseAppTheme`**: When `true`, automatically switches between light and dark palettes based on system theme (default: `false`).\n\n### Headings\nEach heading level (H1-H6) supports individual styling with the following properties:\n\n| Level | Color Property | Font Size Property | Font Family Property | Font Attributes Property |\n|-------|---------------|-------------------|---------------------|-------------------------|\n| H1 | `H1Color` | `H1FontSize` (24) | `H1FontFamily` | `H1FontAttributes` (Bold) |\n| H2 | `H2Color` | `H2FontSize` (20) | `H2FontFamily` | `H2FontAttributes` (Bold) |\n| H3 | `H3Color` | `H3FontSize` (18) | `H3FontFamily` | `H3FontAttributes` (Bold) |\n| H4 | `H4Color` | `H4FontSize` (16) | `H4FontFamily` | `H4FontAttributes` (Bold) |\n| H5 | `H5Color` | `H5FontSize` (14) | `H5FontFamily` | `H5FontAttributes` (Bold) |\n| H6 | `H6Color` | `H6FontSize` (12) | `H6FontFamily` | `H6FontAttributes` (Bold) |\n\n**FontAttributes Values:**\n- `None` - No special formatting\n- `Bold` - Bold text\n- `Italic` - Italic text\n\n**Example - Custom H1 styling:**\n```xml\n\u003cidk:MarkdownView \n    H1Color=\"DarkBlue\"\n    H1FontSize=\"32\"\n    H1FontFamily=\"Georgia\"\n    H1FontAttributes=\"Bold\" /\u003e\n```\n\n**Example - Italic H3 heading:**\n```csharp\nmarkdownView.H3FontAttributes = FontAttributes.Italic;\nmarkdownView.H3Color = Colors.Purple;\n```\n\n### Text Styling\n- **`TextFontSize`**: The font size for regular text (default: `12`).\n- **`TextColor`**: The color for regular text (default: `Black`).\n- **`TextFontFace`**: The font family for regular text.\n\n### Line Break Mode\n- **`LineBreakModeText`**: Line break mode for text (default: `WordWrap`).\n- **`LineBreakModeHeader`**: Line break mode for headings (default: `TailTruncation`).\n\n### Blockquote\n- **`BlockQuoteBackgroundColor`**: The background color for blockquote elements (default: `LightGray`).\n- **`BlockQuoteBorderColor`**: The border color for blockquote elements (default: `BlueViolet`).\n- **`BlockQuoteTextColor`**: The text color for blockquotes (default: `BlueViolet`).\n- **`BlockQuoteFontFace`**: The font family for blockquote text.\n\n### Code Block\n- **`CodeBlockBackgroundColor`**: The background color for code blocks (default: `LightGray`).\n- **`CodeBlockBorderColor`**: The border color for code blocks (default: `BlueViolet`).\n- **`CodeBlockTextColor`**: The text color for code blocks (default: `BlueViolet`).\n- **`CodeBlockFontFace`**: The font family for code blocks.\n- **`CodeBlockFontSize`**: The font size for code blocks (default: `12`).\n- **`EnableCodeBlockCopy`**: When `true`, displays a copy button on code blocks (default: `false`).\n- **`CodeBlockCopyButtonText`**: The text/emoji for the copy button (default: `📋`).\n- **`CodeBlockCopyButtonCopiedText`**: The text/emoji shown after copying (default: `✓`).\n\n### Alert Blocks\n- **`AlertInfoColor`**: Color for NOTE alert blocks (default: `#2196F3`).\n- **`AlertSuccessColor`**: Color for TIP alert blocks (default: `#4CAF50`).\n- **`AlertImportantColor`**: Color for IMPORTANT alert blocks (default: `#9C27B0`).\n- **`AlertWarningColor`**: Color for WARNING alert blocks (default: `#FF9800`).\n- **`AlertErrorColor`**: Color for CAUTION alert blocks (default: `#F44336`).\n\n### Table\n- **`TableHeaderFontSize`**: The font size for table headers (default: `14`).\n- **`TableHeaderTextColor`**: The text color for table headers (default: `Black`).\n- **`TableHeaderBackgroundColor`**: The background color for table headers (default: `LightGray`).\n- **`TableHeaderFontFace`**: The font family for table headers.\n- **`TableRowFontSize`**: The font size for table rows (default: `12`).\n- **`TableRowTextColor`**: The text color for table rows (default: `Black`).\n- **`TableRowFontFace`**: The font family for table rows.\n\n### Image\n- **`ImageAspect`**: The aspect ratio for images (default: `AspectFit`).\n- **`DefaultImageWidth`**: The default width for images when only aspect is specified without explicit dimensions (default: `200`).\n- **`DefaultImageHeight`**: The default height for images when only aspect is specified without explicit dimensions (default: `200`).\n\n### Hyperlinks\n- **`HyperlinkColor`**: The color for hyperlinks (default: `BlueViolet`).\n- **`LinkCommand`**: A command to execute when a hyperlink is clicked.\n- **`LinkCommandParameter`**: A parameter to pass when the hyperlink command is executed.\n\n### Horizontal Rule\n- **`LineColor`**: The color for horizontal rules (default: `LightGray`).\n\n### Spacing\n- **`ParagraphSpacing`**: Modifies the spacing between paragraphs (default: `3`).\n- **`LineHeightMultiplier`** Modifies the line height multiplier for displayed labels (default: `1`). Directly modifies [Label.LineHeight](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.controls.label.lineheight?view=net-maui-8.0).\n\n## Supported Markdown Syntax\n\n- **Headings**: MarkdownView supports headings from `H1` to `H6`.\n    ```markdown\n    # H1\n    ## H2\n    ### H3\n    ```\n\n- **Bold**: Wrap text with `**` or `__` to make it bold.\n    ```markdown\n    **Bold Text**\n    __Bold Text__\n    ```\n\n- **Italic**: Wrap text with `*` or `_` to make it italic.\n    ```markdown\n    *Italic Text*\n    _Italic Text_\n    ```\n\n- **Strikethrough**: Wrap text with `~~` to create strikethrough text.\n    ```markdown\n    ~~Strikethrough Text~~\n    ```\n\n- **Blockquotes**: Add `\u003e` before a paragraph to create a blockquote.\n    ```markdown\n    \u003e This is a blockquote.\n    ```\n\n- **Alert/Admonition Blocks**: Create GitHub-style alert blocks using the `\u003e [!TYPE]` syntax. These are styled callout boxes for highlighting important information.\n\n    Supported alert types:\n    - `NOTE` - Informational notes (ℹ️ blue)\n    - `TIP` - Helpful tips and suggestions (💡 green)\n    - `IMPORTANT` - Important information (❗ purple)\n    - `WARNING` - Warning messages (⚠️ orange)\n    - `CAUTION` - Critical warnings (🛑 red)\n\n    ```markdown\n    \u003e [!NOTE]\n    \u003e This is a note alert. Useful for highlighting information.\n\n    \u003e [!TIP]\n    \u003e This is a tip alert. Provides helpful advice.\n\n    \u003e [!IMPORTANT]\n    \u003e This is an important alert. Crucial information for users.\n\n    \u003e [!WARNING]\n    \u003e This is a warning alert. Content demanding attention.\n\n    \u003e [!CAUTION]\n    \u003e This is a caution alert. Negative potential consequences.\n    ```\n\n    You can customize the colors for each alert type using the following properties:\n    - `AlertInfoColor` - Color for NOTE alerts (default: `#2196F3`)\n    - `AlertSuccessColor` - Color for TIP alerts (default: `#4CAF50`)\n    - `AlertImportantColor` - Color for IMPORTANT alerts (default: `#9C27B0`)\n    - `AlertWarningColor` - Color for WARNING alerts (default: `#FF9800`)\n    - `AlertErrorColor` - Color for CAUTION alerts (default: `#F44336`)\n\n- **Code Blocks**: Enclose code in triple backticks (```) for multi-line code blocks, or single backticks for inline code.\n    ```markdown\n    `Inline code`\n    ```\n    ```markdown\n    ```\n    Multi-line code block\n    ```\n    ```\n\n    **Copy-to-Clipboard Feature**: You can enable a copy button on code blocks that allows users to copy the code content to the clipboard with a single tap.\n\n    ```xml\n    \u003cidk:MarkdownView \n        MarkdownText=\"{Binding MarkdownText}\"\n        EnableCodeBlockCopy=\"True\"\n        CodeBlockCopyButtonText=\"📋\"\n        CodeBlockCopyButtonCopiedText=\"✓\" /\u003e\n    ```\n\n    Properties:\n    - `EnableCodeBlockCopy` - Enable/disable the copy button (default: `false`)\n    - `CodeBlockCopyButtonText` - Text/emoji for the copy button (default: `📋`)\n    - `CodeBlockCopyButtonCopiedText` - Text/emoji shown after copying (default: `✓`)\n\n- **Lists**:\n    - Unordered: Use `-`, `*`, or `+` to create an unordered list.\n    - Ordered: Use numbers followed by a period to create an ordered list.\n\n    ```markdown\n    - Item 1\n    - Item 2\n    1. Item 1\n    2. Item 2\n    ```\n\n- **Tables**: Create tables using pipes (`|`) to separate columns. You can also specify text alignment for table columns using colons (`:`).\n\n    - **Left Alignment**: Add a colon on the left side of the dashes.\n    - **Center Alignment**: Add a colon on both sides of the dashes.\n    - **Right Alignment**: Add a colon on the right side of the dashes.\n\n    ```markdown\n    | Header 1      | Header 2      | Header 3      |\n    |:------------- |:-------------:| -------------:|\n    | Left aligned  | Center aligned| Right aligned |\n    | Row 1         | Data 1        | Data 1        |\n    | Row 2         | Data 2        | Data 2        |\n    ```\n\n    In the above example:\n    - Column 1 (Header 1) is left-aligned.\n    - Column 2 (Header 2) is center-aligned.\n    - Column 3 (Header 3) is right-aligned.\n\n- **Horizontal Rule**: Use `---`, `***`, or `___` for horizontal rules.\n    ```markdown\n    ---   \u003c!-- Horizontal rule --\u003e\n    ```\n\n- **Images**: The control supports image URLs, local files, and base64‑encoded images.  \n  You can also specify optional `width`, `height`, `aspect`, `horizontal`, and `vertical` attributes using the\n  curly‑brace syntax supported by Markdig's Generic Attributes extension.\n\n  - Supported `aspect` values are:\n    - `AspectFit` (default) – scales the image to fit while preserving aspect ratio.\n    - `AspectFill` – fills the space while preserving aspect ratio (image may be clipped).\n    - `Fill` – stretches the image to fill the space (aspect ratio not preserved).\n\n  - Supported `horizontal` values are:\n    - `Start` (default) – aligns the image to the start (left in LTR layouts).\n    - `Center` – centers the image horizontally.\n    - `End` – aligns the image to the end (right in LTR layouts).\n    - `Fill` – stretches the image to fill horizontally.\n\n  - Supported `vertical` values are:\n    - `Start` – aligns the image to the top.\n    - `Center` (default) – centers the image vertically.\n    - `End` – aligns the image to the bottom.\n    - `Fill` – stretches the image to fill vertically.\n\n    ```markdown\n    ![Alt text](http://example.com/image.jpg)                      // image URL\n    ![Alt text](image.png)                                         // local file\n    ![Alt text](data:image/png;base64,...)                         // base64 string\n    ![Alt text](image.png){ width=150 height=75 }                  // specify both width and height (pixels)\n    ![Alt text](image.png){ width=200 }                            // specify width only\n    ![Alt text](image.png){ height=50 }                            // specify height only\n    ![Alt text](image.png){ width=100 height=100 aspect=Fill }     // with custom aspect\n    ![Alt text](image.png){ width=100 aspect=AspectFill }          // with aspect only\n    ![Alt text](image.png){ width=14 height=14 horizontal=Start vertical=Center }  // with positioning\n    ![Alt text](image.png){ width=50 vertical=Start }              // vertical positioning only\n    ![Alt text](image.png){ horizontal=Center }                    // center image horizontally\n    ```\n\n- **Hyperlinks**: Create hyperlinks using the following format:\n    ```markdown\n    [Link Text](http://example.com)\n    ```\n\n## Image, Hyperlink and E-Mail Handling\n\n### Image Handling\nThe `MarkdownView` supports various sources for displaying images:\n1. **Image URLs**: Fetch and display images from the web.\n2. **Local File**: Load images from local resources or assets.\n3. **Base64 Encoded String**: Support for images encoded in base64 format.\n\nThe `ImageAspect` property allows you to customize how images are displayed within the control.\n\n### Hyperlink Handling\nYou can respond to hyperlinks in Markdown content using the `LinkCommand` and `OnHyperLinkClicked` event. Hyperlinks are automatically detected and displayed with the color specified by the `HyperlinkColor` property.\n\nWhen a user taps on a hyperlink:\n- The `LinkCommand` is executed, if defined, with the hyperlink URL as the command parameter.\n- The `OnHyperLinkClicked` event is triggered, providing the tapped hyperlink URL in the event arguments.    \n\n\n### Email Link Handling\nYou can respond to email links in Markdown content using the `EMailCommand` and `OnEmailClicked` event. Email links are automatically detected and displayed with the color specified by the `HyperlinkColor` property. \n\nWhen a user taps on an email address:\n- The `EMailCommand` is executed, if defined, with the tapped email address as the command parameter.\n- The `OnEmailClicked` event is triggered, providing the tapped email address in the event arguments.\n\n## Example Usage\n\nHere's an example of how to use the `MarkdownView` in your XAML:\n\n```xml\n\u003cidk:MarkdownView \n    MarkdownText=\"{Binding MarkdownText}\" \n    H1FontSize=\"20\"\n    H1Color=\"{StaticResource Blue100Accent}\" \n    H2FontSize=\"18\"\n    H2Color=\"{StaticResource Blue200Accent}\"\n    H3FontSize=\"16\"\n    H3Color=\"{StaticResource Blue300Accent}\"\n    CodeBlockBackgroundColor=\"{StaticResource GrayQuote}\"\n    CodeBlockTextColor=\"{StaticResource Gray600}\"\n    CodeBlockBorderColor=\"{StaticResource GrayQuoteBorder}\"\n    CodeBlockFontFace=\"CamingoCodeRegular\"\n    CodeBlockFontSize=\"12\"\n    BlockQuoteBackgroundColor=\"{StaticResource Yellow300Accent}\"\n    BlockQuoteTextColor=\"{StaticResource Gray600}\"\n    BlockQuoteBorderColor=\"{StaticResource Yellow100Accent}\"\n    BlockQuoteFontFace=\"CamingoCodeItalic\"\n    TextFontFace=\"OpenSans\"\n    TextFontSize=\"13\"\n    TextColor=\"{StaticResource Black}\"\n    TableHeaderBackgroundColor=\"{StaticResource Gray100}\"\n    TableHeaderFontFace=\"OpenSans\"\n    TableHeaderFontSize=\"13\"\n    TableHeaderTextColor=\"{StaticResource Gray900}\"\n    TableRowFontFace=\"OpenSans\"\n    TableRowFontSize=\"11\"\n    TableRowTextColor=\"{StaticResource Gray600}\"\n    ImageAspect=\"Fill\"\n    HyperlinkColor=\"{StaticResource Blue100Accent}\"\n    LineColor=\"{StaticResource GrayQuoteBorder}\"\n    LinkCommand=\"{Binding LinkReceivedCommand}\"\n    OnHyperLinkClicked=\"MarkdownView_HyperLinkClicked\"\n    LineHeightMultiplier=\"1.2\"\n    ParagraphSpacing=1\u003e\n\u003c/idk:MarkdownView\u003e\n```\n\nHere’s an example of how to use the `MarkdownView` in your c#:\n\n```csharp\n\n var markdownView = new MarkdownView\n        {\n            MarkdownText = \"# Welcome to MarkdownView\\n\" +\n                          \"This is **bold text**, and this is *italic text*.\\n\\n\" +\n                          \"Here's a blockquote:\\n\\n\" +\n                          \"\u003e This is a blockquote\\n\\n\" +\n                          \"Here's a list:\\n\" +\n                          \"- Item 1\\n\" +\n                          \"- Item 2\\n\\n\" +\n                          \"Here's a code block:\\n\\n\" +\n                          \"```\\n\" +\n                          \"var code = \\\"This is a code block\\\";\\n\" +\n                          \"```\\n\\n\" +\n                          \"Here's a link: [Click here](https://example.com)\\n\\n\" +\n                          \"Here's an image:\\n\" +\n                          \"![Alt text](https://example.com/image.jpg)\\n\",\n\n            H1FontSize = 24,\n            H1Color = Colors.Blue,\n            H2FontSize = 20,\n            H2Color = Colors.DarkGray,\n            H3FontSize = 18,\n            H3Color = Colors.Gray,\n            TextFontSize = 14,\n            TextColor = Colors.Black,\n            BlockQuoteBackgroundColor = Colors.LightYellow,\n            BlockQuoteTextColor = Colors.Gray,\n            BlockQuoteBorderColor = Colors.DarkGray,\n            CodeBlockBackgroundColor = Colors.LightGray,\n            CodeBlockTextColor = Colors.Purple,\n            CodeBlockFontSize = 12,\n            CodeBlockFontFace = \"Consolas\",\n            HyperlinkColor = Colors.BlueViolet,\n            LineColor = Colors.Gray,\n            ImageAspect = Aspect.AspectFit,\n            TableHeaderBackgroundColor = Colors.LightGray,\n            TableHeaderFontSize = 14,\n            TableHeaderTextColor = Colors.Black,\n            TableRowFontSize = 12,\n            TableRowTextColor = Colors.DarkGray,\n            ParagraphSpacing = 1,\n            LineHeightMultiplier = 1.2,\n        };\n\n        markdownView.OnHyperLinkClicked += (sender, e) =\u003e\n        {\n            DisplayAlert(\"Link Clicked\", $\"You clicked on: {e.Url}\", \"OK\");\n        };\n```\n\n## Contributing\n\nContributions 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.\n\n---\n\n# How to Contribute\n\nThank you for considering contributing to our project! Please follow these guidelines to ensure a smooth process.\n\n## 1. Work on a Feature Branch\n\nAlways create a new branch for your feature or fix. This keeps the main branch clean and makes it easier to manage changes.\n\n```bash\ngit checkout -b feature/your-feature-name\n```\n\n## 2. Start a Pull Request\n\nOnce your feature is complete, push your branch to the repository and start a pull request to merge it into the main branch. Ensure all tests pass and your code follows the project's coding standards.\n\n```bash\ngit push origin feature/your-feature-name\n```\n\nThen, create a pull request on GitHub and provide a clear description of your changes.\n\n## 3. Use Semantic Release Prefixes for Commits\n\nWhen committing your changes, use semantic release prefixes to categorize your commits. This helps in generating automated release notes and versioning.\n\nThe commit contains the following structural elements to communicate intent to the consumers of your library:\n\n- **fix:** a commit of the type fix patches a bug in your codebase (this correlates with PATCH in Semantic Versioning).\n- **feat:** a commit of the type feat introduces a new feature to the codebase (this correlates with MINOR in Semantic Versioning).\n- **BREAKING CHANGE:** a commit that has a footer BREAKING CHANGE:, or appends a ! after the type/scope, introduces a breaking API change (correlating with MAJOR in Semantic Versioning). A BREAKING CHANGE can be part of commits of any type.\n- Types other than fix: and feat: are allowed. For example, @commitlint/config-conventional (based on the Angular convention) recommends:\n  - **build:** Changes that affect the build system or external dependencies\n  - **chore:** Other changes that don't modify src or test files\n  - **ci:** Changes to our CI configuration files and scripts\n  - **docs:** Documentation only changes\n  - **style:** Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)\n  - **refactor:** A code change that neither fixes a bug nor adds a feature\n  - **perf:** A code change that improves performance\n  - **test:** Adding missing tests or correcting existing tests\n\nFooters other than BREAKING CHANGE: \u003cdescription\u003e may be provided and follow a convention similar to git trailer format. Additional types are not mandated by the Conventional Commits specification and have no implicit effect in Semantic Versioning (unless they include a BREAKING CHANGE). A scope may be provided to a commit’s type, to provide additional contextual information and is contained within parenthesis, e.g., feat(parser): add ability to parse arrays.\n\nExample commit messages:\n\n```bash\ngit commit -m \"fix: resolve issue with user authentication\"\ngit commit -m \"feat: add new payment gateway integration\"\ngit commit -m \"BREAKING CHANGE: update API endpoints\"\n```\n\n## 4. Write Meaningful Commit Messages\n\nCommit messages should be concise yet descriptive. They should explain the \"what\" and \"why\" of your changes.\n\n- **Good Example:** `fix: correct typo in user profile page`\n- **Bad Example:** `fixed stuff`\n\n## Additional Tips\n\n- Ensure your code adheres to the project's coding standards and guidelines.\n- Include tests for new features or bug fixes.\n- Keep your commits atomic; a single commit should represent a single logical change.\n- Update the documentation to reflect any new features or changes.\n\nWe appreciate your contributions and look forward to your pull requests!\n\nHappy coding!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0xc3u%2Findiko.maui.controls.markdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F0xc3u%2Findiko.maui.controls.markdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0xc3u%2Findiko.maui.controls.markdown/lists"}