Skip to main content

Markdown Styling and Customization

The Markdown control in Avalonia supports custom styling via named resources. You can override these resources in your application to customize the appearance of Markdown elements.

Customizable Resources​

Below is a list of key resources you can override in your theme or resource dictionary:

Block Elements​

  • MarkdownBlockMargin — Margin for block elements
  • MarkdownHyperlinkForeground — Foreground color for hyperlinks
  • MarkdownHyperlinkForegroundVisited — Foreground color for visited links
  • MarkdownHyperlinkForegroundPointerOver — Foreground color for hovered links

Selection​

  • MarkdownSelectionBrush — Brush for selected text

Code​

  • MarkdownCodeFontFamily — Font family for code

Code Blocks​

  • MarkdownCodeBlockParagraphPadding — Padding for code blocks
  • MarkdownCodeBlockParagraphBorderThickness — Border thickness for code blocks
  • MarkdownCodeBlockParagraphCornerRadius — Corner radius for code blocks
  • MarkdownCodeBlockParagraphBackground — Background for code blocks
  • MarkdownCodeBlockParagraphBorderBrush — Border brush for code blocks

Inline Code​

  • MarkdownCodeRunBackground — Background for inline code

Headers​

  • MarkdownHeader1ParagraphFontSize — Font size for H1
  • MarkdownHeader2ParagraphFontSize — Font size for H2
  • MarkdownHeader3ParagraphFontSize — Font size for H3
  • MarkdownHeader4ParagraphFontSize — Font size for H4
  • MarkdownHeader5ParagraphFontSize — Font size for H5
  • MarkdownHeader6ParagraphFontSize — Font size for H6
  • MarkdownHeader1ParagraphPadding — Padding for H1
  • MarkdownHeader2ParagraphPadding — Padding for H2
  • MarkdownHeader1ParagraphMargin — Margin for H1
  • MarkdownHeader2ParagraphMargin — Margin for H2
  • MarkdownHeader3ParagraphMargin — Margin for H3
  • MarkdownHeader4ParagraphMargin — Margin for H4
  • MarkdownHeader5ParagraphMargin — Margin for H5
  • MarkdownHeader6ParagraphMargin — Margin for H6

Quote Blocks​

  • MarkdownQuoteBlockSectionBorderThickness — Border thickness for quote blocks
  • MarkdownQuoteBlockSectionBorderBrush — Border brush for quote blocks
  • MarkdownQuoteBlockSectionForeground — Foreground for quote blocks
  • MarkdownQuoteBlockSectionPadding — Padding for quote blocks
  • MarkdownQuoteBlockFirstChildSectionMargin — Margin for first child in quote block
  • MarkdownQuoteBlockLastChildSectionMargin — Margin for last child in quote block

Header Underline​

  • MarkdownHeaderUnderlineParagraphBorderBrush — Brush for header underline
  • MarkdownHeaderUnderlineParagraphBorderThickness — Thickness for header underline

Tables​

  • MarkdownTableCellBorderBrush — Border brush for table cells
  • MarkdownTableBorderBrush — Border brush for tables
  • MarkdownTableBorderThickness — Border thickness for tables
  • MarkdownTableCellSpacing — Cell spacing for tables
  • MarkdownTableCellBorderThickness — Border thickness for table cells
  • MarkdownTableCellParagraphPadding — Padding for table cell paragraphs

Inline Styles​

  • MarkdownMarkedSpanBackgroundBrush — Background for marked spans

How to Override​

To customize, define these resources in your application theme or resource dictionary. For example:

<SolidColorBrush x:Key="MarkdownHyperlinkForeground" Color="#FF0000" />

Example: Custom Theme​

<ResourceDictionary>
  <SolidColorBrush x:Key="MarkdownSelectionBrush" Color="#FFD700" />
  <FontFamily x:Key="MarkdownCodeFontFamily">Consolas</FontFamily>
  <!-- Add more overrides as needed -->
</ResourceDictionary>

See Also​