Skip to content

Commit d8c9667

Browse files
SyncfusionKarthikeyanSyncfusionKarthikeyan
authored
Merge pull request #3581 from syncfusion-content/md-viewer-ug-update
968298 : Content Updates for .NET MAUI Markdown Viewer UG Document
2 parents 9dcd1b8 + d770c3c commit d8c9667

10 files changed

+235
-217
lines changed

‎MAUI/MarkdownViewer/Appearance.md‎

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -29,21 +29,15 @@ The [SfMarkdownViewer]() control in .NET MAUI provides a powerful styling system
2929

3030
The appearance of headings and body content in SfMarkdownViewer can be customized using the MarkdownStyleSettings class.
3131

32-
[H1FontSize](), [H2FontSize](), [H3FontSize]() – Gets or sets the font size for H1, H2, and H3 heading elements respectively.
32+
- [H1FontSize](), [H2FontSize](), [H3FontSize]() – Gets or sets the font size for H1, H2, and H3 heading elements respectively.
33+
- [H1Color](), [H2Color](), [H3Color]() – Gets or sets the text color for H1, H2, and H3 heading elements respectively.
34+
- [BodyFontSize]() – Gets or sets the font size for regular paragraph text.
3335

34-
[H1Color](), [H2Color](), [H3Color]() – Gets or sets the text color for H1, H2, and H3 heading elements respectively.
35-
36-
[BodyFontSize]() – Gets or sets the font size for regular paragraph text.
37-
38-
[BodyTextColor]() – Gets or sets the text color for body content.
39-
40-
[TableHeaderFontSize](), [TableDataFontSize]() – Gets or sets the font size for table headers and table content respectively.
41-
42-
[TableHeaderTextColor](), [TableDataTextColor]() – Gets or sets the text color for table headers and table content respectively.
43-
44-
[TableBackground]() – Gets or sets the background color for the entire table area.
45-
46-
[CssStyleRules]() – Gets or sets raw CSS styles to override or extend default Markdown rendering behavior.
36+
- [BodyTextColor]() – Gets or sets the text color for body content.
37+
- [TableHeaderFontSize](), [TableDataFontSize]() – Gets or sets the font size for table headers and table content respectively.
38+
- [TableHeaderTextColor](), [TableDataTextColor]() – Gets or sets the text color for table headers and table content respectively.
39+
- [TableBackground]() – Gets or sets the background color for the entire table area.
40+
- [CssStyleRules]() – Gets or sets raw CSS styles to override or extend default Markdown rendering behavior.
4741

4842
{% tabs %}
4943
{% highlight xaml %}
@@ -99,6 +93,8 @@ The appearance of headings and body content in SfMarkdownViewer can be customize
9993
{% endhighlight %}
10094
{% endtabs %}
10195

96+
The following output shows how these style settings enhance the appearance of rendered Markdown content:
97+
10298
![Sample markdown content appearance customization](images/maui-markdown-viewer-appearance.png)
10399

104-
With [MarkdownStyleSettings](), you gain full control over how Markdown content looks in your .NET MAUI app—whether you're building a documentation viewer, a note-taking app, or a styled content portal.
100+
With [MarkdownStyleSettings](), you gain full control over how Markdown content looks in your .NET MAUI app, whether you're building a documentation viewer, a note-taking app, or a styled content portal.

‎MAUI/MarkdownViewer/ContentRetrieval.md‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -66,19 +66,19 @@ Extracts the plain text content from the Markdown assigned to the `SfMarkdownVie
6666
{% tabs %}
6767
{% highlight C# hl_lines="12" %}
6868

69-
public partial class MainPage : ContentPage
69+
public partial class MainPage : ContentPage
70+
{
71+
public MainPage()
7072
{
71-
public MainPage()
72-
{
73-
InitializeComponent();
74-
SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
75-
markdownViewer.Source = "Welcome to **Markdown Viewer**!";
76-
Content = markdownViewer;
77-
}
78-
. . .
79-
80-
string text = markdownViewer.GetText();
73+
InitializeComponent();
74+
SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
75+
markdownViewer.Source = "Welcome to **Markdown Viewer**!";
76+
Content = markdownViewer;
8177
}
78+
. . .
79+
80+
string text = markdownViewer.GetText();
81+
}
8282

8383
{% endhighlight %}
8484
{% endtabs %}

‎MAUI/MarkdownViewer/GettingStarted.md‎

Lines changed: 82 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -77,37 +77,36 @@ namespace MarkdownViewerGettingStarted
7777

7878
{% highlight xaml %}
7979

80-
<ContentPage
81-
. . .
82-
xmlns:markdown="clr-namespace:Syncfusion.Maui.MarkdownViewer;
83-
assembly=Syncfusion.Maui.MarkdownViewer">
80+
<ContentPage
81+
. . .
82+
xmlns:markdown="clr-namespace:Syncfusion.Maui.MarkdownViewer;
83+
assembly=Syncfusion.Maui.MarkdownViewer">
84+
85+
<markdown:SfMarkdownViewer />
8486

85-
<markdown:SfMarkdownViewer />
86-
87-
</ContentPage>
87+
</ContentPage>
8888

8989
{% endhighlight %}
9090

9191
{% highlight C# %}
9292

9393
using Syncfusion.Maui.MarkdownViewer;
9494

95-
namespace MarkdownViewerGettingStarted
95+
namespace MarkdownViewerGettingStarted
96+
{
97+
public partial class MainPage : ContentPage
9698
{
97-
public partial class MainPage : ContentPage
99+
public MainPage()
98100
{
99-
public MainPage()
100-
{
101-
InitializeComponent();
102-
SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
103-
Content = markdownViewer;
104-
}
105-
}
106-
}
101+
InitializeComponent();
102+
SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
103+
Content = markdownViewer;
104+
}
105+
}
106+
}
107107

108108
{% endhighlight %}
109109
{% endtabs %}
110-
111110
{% endtabcontent %}
112111

113112
{% tabcontent Visual Studio Code %}
@@ -178,108 +177,109 @@ namespace MarkdownViewerSample
178177
{% tabs %}
179178
{% highlight xaml %}
180179

181-
<ContentPage
182-
. . .
183-
xmlns:markdown="clr-namespace:Syncfusion.Maui.MarkdownViewer;
184-
assembly=Syncfusion.Maui.MarkdownViewer">
185-
186-
<markdown:SfMarkdownViewer />
180+
<ContentPage
181+
. . .
182+
xmlns:markdown="clr-namespace:Syncfusion.Maui.MarkdownViewer;
183+
assembly=Syncfusion.Maui.MarkdownViewer">
184+
185+
<markdown:SfMarkdownViewer />
187186

188-
</ContentPage>
187+
</ContentPage>
189188

190189
{% endhighlight %}
191190

192191
{% highlight C# %}
193192

194-
using Syncfusion.Maui.MarkdownViewer;
193+
using Syncfusion.Maui.MarkdownViewer;
195194

196-
namespace MarkdownViewerGettingStarted
195+
namespace MarkdownViewerGettingStarted
196+
{
197+
public partial class MainPage : ContentPage
197198
{
198-
public partial class MainPage : ContentPage
199+
public MainPage()
199200
{
200-
public MainPage()
201-
{
202-
InitializeComponent();
203-
SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
204-
Content = markdownViewer;
205-
}
206-
}
207-
}
201+
InitializeComponent();
202+
SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
203+
Content = markdownViewer;
204+
}
205+
}
206+
}
208207

209208
{% endhighlight %}
210209
{% endtabs %}
211210

211+
{% endtabcontent %}
212+
{% endtabcontents %}
213+
212214
## Step 5: Add Source to the SfMarkdownViewer
213215

214216
To display Markdown content, assign a string to the `Source` property of the SfMarkdownViewer control. This string can contain standard Markdown syntax such as headings, bold text, lists, and images.
215217

216218
{% tabs %}
217219
{% highlight xaml %}
218220

219-
<markdown:SfMarkdownViewer>
220-
<markdown:SfMarkdownViewer.Source>
221-
<x:String>
222-
<![CDATA[
223-
# What is Markdown Viewer?
224-
Markdown View is a UI control in .NET MAUI that allows developers to render Markdown content with full formatting support. It is designed to work efficiently across both mobile and desktop platforms. The viewer supports headings, bold and italic text, lists, tables, images, code blocks, etc.
225-
226-
# Header 1
227-
Used for the main title or top-level heading in a Markdown document.
228-
229-
## Header 2
230-
Used to define major sections within your Markdown content.
231-
232-
## Table
233-
234-
| | Column 1 | Column 2 | Column 3 |
235-
|--------------|----------|----------|----------|
236-
| Row 1 | Content | Content | Content |
237-
| Row 2 | Content | Content | Content |
238-
| Row 3 | Content | Content | Content |
239-
]]>
240-
</x:String>
241-
</markdown:SfMarkdownViewer.Source>
242-
</markdown:SfMarkdownViewer>
243-
{% endhighlight %}
244-
245-
{% highlight C# %}
246-
247-
public partial class MainPage : ContentPage
248-
{
249-
private const string markdownContent = @"# What is Markdown Viewer?
250-
Markdown View is a UI control in .NET MAUI that allows developers to render Markdown content with full formatting support. It is designed to work efficiently across both mobile and desktop platforms. The viewer supports headings, bold and italic text, lists, tables, images, code blocks, etc.
221+
<markdown:SfMarkdownViewer>
222+
<markdown:SfMarkdownViewer.Source>
223+
<x:String>
224+
<![CDATA[
225+
# What is the Markdown Viewer?
226+
The Markdown Viewer is a UI control in .NET MAUI that allows developers to render Markdown content with full formatting support. It was designed to work efficiently on both mobile and desktop platforms. The viewer supports headings, bold and italic text, lists, tables, images, code blocks and more.
251227

252228
# Header 1
253229
Used for the main title or top-level heading in a Markdown document.
254230

255231
## Header 2
256232
Used to define major sections within your Markdown content.
257233

258-
## Table
234+
### Table
259235

260236
| | Column 1 | Column 2 | Column 3 |
261237
|--------------|----------|----------|----------|
262238
| Row 1 | Content | Content | Content |
263239
| Row 2 | Content | Content | Content |
264-
| Row 3 | Content | Content | Content |";
240+
| Row 3 | Content | Content | Content |
241+
]]>
242+
</x:String>
243+
</markdown:SfMarkdownViewer.Source>
244+
</markdown:SfMarkdownViewer>
265245

266-
public MainPage()
267-
{
268-
InitializeComponent();
269-
SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
270-
markdownViewer.Source = markdownContent;
271-
Content = markdownViewer;
272-
}
273-
}
246+
{% endhighlight %}
247+
248+
{% highlight C# %}
249+
250+
public partial class MainPage : ContentPage
251+
{
252+
private const string markdownContent = @"# What is the Markdown Viewer?
253+
The Markdown Viewer is a UI control in .NET MAUI that allows developers to render Markdown content with full formatting support. It was designed to work efficiently on both mobile and desktop platforms. The viewer supports headings, bold and italic text, lists, tables, images, code blocks and more.
254+
255+
# Header 1
256+
Used for the main title or top-level heading in a Markdown document.
257+
258+
## Header 2
259+
Used to define major sections within your Markdown content.
260+
261+
### Table
262+
263+
| | Column 1 | Column 2 | Column 3 |
264+
|--------------|----------|----------|----------|
265+
| Row 1 | Content | Content | Content |
266+
| Row 2 | Content | Content | Content |
267+
| Row 3 | Content | Content | Content |";
268+
269+
public MainPage()
270+
{
271+
InitializeComponent();
272+
SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
273+
markdownViewer.Source = markdownContent;
274+
Content = markdownViewer;
275+
}
276+
}
274277

275278
{% endhighlight %}
276279
{% endtabs %}
277280

278281
N> For more details about binding Markdown content from various sources, refer to [MarkdownSources](/MarkdownSources.md).
279282

280-
{% endtabcontent %}
281-
{% endtabcontents %}
282-
283283
![Output of Markdown Viewer](Images/maui-markdown-viewer-gettingstarted.png)
284284

285-
You can access a complete getting started sample from this [link.]()
285+
You can access a complete getting started sample [here]().

‎MAUI/MarkdownViewer/Images/maui-markdown-viewer-appearance.png‎

614 Bytes
Loading

‎MAUI/MarkdownViewer/Images/maui-markdown-viewer-gettingstarted.png‎

796 Bytes
Loading

‎MAUI/MarkdownViewer/Images/maui-markdown-viewer-overriding-styles.png‎

65.4 KB
Loading

‎MAUI/MarkdownViewer/Images/maui-markdown-viewer-overview.png‎

-299 Bytes
Loading

0 commit comments

Comments
 (0)