How to Customize the Line Height in .NET MAUI Markdown Viewer?

This article explains how to customize the line height of Markdown content rendered in the .NET MAUI MarkdownViewer control.

By default, the MarkdownViewer applies a standard line height that may not suit all design or readability requirements. While the control offers flexible styling options, adjusting line spacing requires a clear understanding of how Markdown is parsed and rendered within the .NET MAUI framework.

Follow the step-by-step guidance to fine-tune line height using styles, and platform-specific tweaks ensuring consistent layout and improved text legibility across devices.

Step 1: Initializing SfMarkdownViewer

Check out this User Guide documentation to add and initialize MarkdownViewer control. Use the Source property to load markdown content as a string or from a file path.

XAML

    <markdown:SfMarkdownViewer>
       <markdown:SfMarkdownViewer.Source>
           <x:String>
               <![CDATA[
# What is the Markdown Viewer?  
The Markdown Viewer is a UI control in .NET MAUI that allows developers to render Markdown content with full formatting support.

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

### Table  
| Item | Description |
|------|-------------|
| A    | Sample row  |
           ]]>
           </x:String>
       </markdown:SfMarkdownViewer.Source>
   </markdown:SfMarkdownViewer>

Step 2: Understanding the Default Line Height Behavior

By default, the .NET MAUI MarkdownViewer applies a standard line height based on its internal rendering engine and platform-specific text layout. This default spacing is designed to ensure consistent readability across devices, but it may not align with all design requirements especially when integrating Markdown content into custom layouts or branded UI themes.

The image above illustrates the default line height behavior across typical Markdown elements

Key points about the default behavior:

• Line height is implicitly derived from the platform’s native text rendering.
• Markdown elements like headings, paragraphs, and lists use predefined spacing that may vary slightly between iOS, Android, and Windows.
• There is no direct LineHeight property exposed on the Markdown Viewer control itself, so customization typically involves styling the underlying text elements.

Understanding this baseline behavior helps you decide whether and how to override it for better visual consistency.

Step 3: Customizing Line Height Using Styles

While the SfMarkdownViewer does not expose a direct LineHeight property, you can override the default spacing by applying custom styles using CSS-like rules through the CssStyleRules property in MarkdownStyleSettings. These styles target the internal Markdown-rendered elements such as headings, paragraphs, and lists, allowing you to control line height, font size, and spacing with familiar CSS syntax.

XAML

   <ContentPage.Resources>
       <ResourceDictionary>
           <x:String x:Key="CustomStyle">
               body {
           background: #F5F7FA;
           font-size: 16px;
           color: #2E2E2E;
           line-height: 3.7;
       }

       h1 {
           font-weight: 700;
           font-size: 30px;
           line-height: 38px;
           letter-spacing: 0.5px;
       }

       h2 {
           line-height: 32px;
           letter-spacing: 0.4px;
       }

       h3 {
           line-height: 28px;
       }
           </x:String>
       </ResourceDictionary>
   </ContentPage.Resources>

Output:

Refer to the GitHub sample to examine the full working implementation.

Conclusion:

Hope you enjoyed learning how to customize line height for Markdown content in the .NET MAUI SfMarkdownViewer control to improve readability and layout consistency.

You can refer to our .NET MAUI Markdown Viewer feature tour page to learn about its other groundbreaking feature representations and documentation to understand how to present and manipulate data.

For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!