syncfusion-maui-markdown-viewer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion .NET MAUI MarkdownViewer

实现Syncfusion .NET MAUI MarkdownViewer

This skill guides you through implementing the SfMarkdownViewer control, a lightweight and efficient UI component for rendering Markdown content with full formatting support in .NET MAUI applications across mobile and desktop platforms.

本技能将指导你实现SfMarkdownViewer控件，这是一款轻量高效的UI组件，可在跨移动和桌面平台的.NET MAUI应用中渲染具备完整格式支持的Markdown内容。

When to Use This Skill

何时使用此技能

Use this skill when you need to:

Display Markdown-formatted content in a .NET MAUI application
Render in-app documentation, user guides, or help content
Show release notes, changelogs, or feature updates
Present FAQs, troubleshooting guides, or support articles
Load Markdown from strings, local files, embedded resources, or URLs
Customize the appearance of rendered Markdown (fonts, colors, spacing)
Apply custom CSS styling for advanced theming
Retrieve or convert Markdown content programmatically (to HTML or plain text)
Create documentation viewers, note-taking apps, or content portals

在以下场景中可使用本技能：

在.NET MAUI应用中显示Markdown格式内容
渲染应用内文档、用户指南或帮助内容
展示发布说明、更新日志或功能更新信息
呈现常见问题、故障排除指南或支持文章
从字符串、本地文件、嵌入资源或URL加载Markdown内容
自定义渲染后Markdown的外观（字体、颜色、间距）
应用自定义CSS样式以实现高级主题设置
通过编程方式检索或转换Markdown内容（转为HTML或纯文本）
创建文档查看器、笔记应用或内容门户

Component Overview

组件概述

SfMarkdownViewer provides:

Standard Markdown Support — Renders headings, bold/italic text, lists, tables, images, code blocks, links, and more
Flexible Input Sources — Load content from strings,
```
.md
```
files, embedded resources, or remote URLs
Appearance Customization — Control fonts, colors, and spacing via
```
MarkdownStyleSettings
```
Custom CSS Styling — Apply advanced theming using raw CSS rules
Content Retrieval — Access raw Markdown, convert to HTML, or extract plain text
Smooth Scrolling — Fluid navigation through large documents across all platforms
Cross-Platform — Consistent rendering on iOS, Android, Windows, and macOS

Typical Use Cases:

In-app documentation and feature tours
Release notes and version update displays
Help sections and support portals
Interactive content with links
Styled content presentation

SfMarkdownViewer具备以下特性：

标准Markdown支持 — 渲染标题、粗体/斜体文本、列表、表格、图片、代码块、链接等内容
灵活的输入源 — 从字符串、
```
.md
```
文件、嵌入资源或远程URL加载内容
外观自定义 — 通过
```
MarkdownStyleSettings
```
控制字体、颜色和间距
自定义CSS样式 — 使用原始CSS规则实现高级主题设置
内容检索 — 访问原始Markdown、转为HTML或提取纯文本
流畅滚动 — 在所有平台上流畅浏览大型文档
跨平台兼容 — 在iOS、Android、Windows和macOS上实现一致渲染

典型使用场景：

应用内文档和功能引导
发布说明和版本更新展示
帮助板块和支持门户
带链接的交互式内容
样式化内容展示

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

When you need to:

Install the
```
Syncfusion.Maui.MarkdownViewer
```
NuGet package
Register the Syncfusion handler in
```
MauiProgram.cs
```
Create your first SfMarkdownViewer control (XAML or C#)
Add basic Markdown content to display

📄 阅读： references/getting-started.md

适用于以下需求：

安装
```
Syncfusion.Maui.MarkdownViewer
```
NuGet包
在
```
MauiProgram.cs
```
中注册Syncfusion处理程序
创建首个SfMarkdownViewer控件（XAML或C#）
添加基础Markdown内容用于显示

Loading Content from Different Sources

从不同源加载内容

📄 Read: references/loading-content.md

When you need to:

Load Markdown from a string variable
Read Markdown from a local
```
.md
```
file
Load embedded resource files from your project
Fetch Markdown from a remote URL
Handle async loading scenarios
Choose the right content source for your use case

📄 阅读： references/loading-content.md

适用于以下需求：

从字符串变量加载Markdown
从本地
```
.md
```
文件读取Markdown
从项目中加载嵌入资源文件
从远程URL获取Markdown
处理异步加载场景
为你的使用场景选择合适的内容源

Appearance Customization

外观自定义

📄 Read: references/appearance-customization.md

When you need to:

Customize heading sizes and colors (H1, H2, H3)
Change body text font size and color
Style table headers, data cells, and backgrounds
Use the
```
MarkdownStyleSettings
```
class
Match Markdown appearance with your app's theme
Understand property-based styling approach

📄 阅读： references/appearance-customization.md

适用于以下需求：

自定义标题大小和颜色（H1、H2、H3）
修改正文字体大小和颜色
设置表格标题、数据单元格和背景样式
使用
```
MarkdownStyleSettings
```
类
使Markdown外观与应用主题匹配
理解基于属性的样式设置方式

Custom CSS Styling

自定义CSS样式

📄 Read: references/custom-css-styling.md

When you need to:

Apply advanced styling beyond basic properties
Override default styles with custom CSS rules
Style images (borders, shadows, rounded corners, sizing)
Customize table appearance (striped rows, borders, padding)
Control scrollbar visibility and styling
Implement branded content designs
Understand CSS precedence over properties

📄 阅读： references/custom-css-styling.md

适用于以下需求：

实现基础属性之外的高级样式设置
使用自定义CSS规则覆盖默认样式
设置图片样式（边框、阴影、圆角、尺寸）
自定义表格外观（条纹行、边框、内边距）
控制滚动条的可见性和样式
实现品牌化内容设计
理解CSS相对于属性的优先级

Content Retrieval

内容检索

📄 Read: references/content-retrieval.md

When you need to:

Retrieve the raw Markdown text programmatically
Convert Markdown content to HTML format
Extract plain text without formatting
Use
```
GetMarkdownText()
```
,
```
GetHtmlText()
```
, or
```
GetText()
```
methods
Process or transform Markdown content in code

📄 阅读： references/content-retrieval.md

适用于以下需求：

通过编程方式检索原始Markdown文本
将Markdown内容转换为HTML格式
提取无格式的纯文本
使用
```
GetMarkdownText()
```
、
```
GetHtmlText()
```
或
```
GetText()
```
方法
在代码中处理或转换Markdown内容

Troubleshooting

故障排除

📄 Read: references/troubleshooting.md

When you encounter:

Handler not registered errors
NuGet package installation issues
Styles not applying correctly
CSS not overriding properties
Font size unit problems
Image loading failures
URL loading issues
Cross-platform rendering differences

📄 阅读： references/troubleshooting.md

适用于遇到以下问题时：

处理程序未注册错误
NuGet包安装问题
样式未正确应用
CSS未覆盖属性
字体大小单位问题
图片加载失败
URL加载问题
跨平台渲染差异