MudMarkdown properties

SourceType and Value

The type of source for the markdown content. Based on this parameter the value of Value will be treated differently.

Available values:

• RawValue: raw markdown as a string (default).
• File: path to a file that contains markdown.
• Url: HTTP URL that points to markdown.

RawValue

<MudMarkdown
	Value="**bold value** and `code value`."
/>

or explicitly:

<MudMarkdown
	Value="**bold value** and `code value`."
	SourceType="MarkdownSourceType.RawValue"
/>

File

<MudMarkdown
	Value="/path/to/my/markdown.md"
	SourceType="MarkdownSourceType.File"
/>

Content of the file is:

#### Things to do in Japan:
- Go to Kawaguchi-ko
- Climb Aka-dake
- Visit Dogo-onsen

Url

<MudMarkdown
	Value="https://raw.githubusercontent.com/MyNihongo/MudBlazor.Markdown/refs/heads/main/README.md"
	SourceType="MarkdownSourceType.Url"
/>

HasTableOfContents

Gets or sets a flag whether a table of contents is shown. Defaults to false.

<MudMarkdown
	Value="some value"
	HasTableOfContents="true"
/>

TableOfContentsHeader

Gets or sets a title of the table of contents. Defaults to null. If it is empty, then the title is not rendered. It has no effect in case HasTableOfContents is false.

<MudMarkdown
	Value="some value"
	HasTableOfContents="true"
	TableOfContentsHeader="My cool header"
/>

Styling

Define custom styling of the markdown component.

Table

Styling of <MudSimpleTable />.

• IsStriped (bool): Uses alternating colors for table rows. Defaults to true.
• IsBordered (bool): Shows left and right borders for each table cell. Defaults to true.
• Elevation (int): The size of the drop shadow. Defaults to 1. A higher number creates a heavier drop shadow. Use a value of 0 for no shadow.
• CellMinWidth (int?): Sets the minimum width of a table cell. Defaults to null.
• Dense (bool): Uses compact padding for all rows. Defaults to false.

<MudMarkdown
	Value="some markdown value"
	Styling="Styling"
/>

@code
{
	private static readonly MudMarkdownStyling Styling = new()
	{
		Table =
		{
			Elevation = 16,
			CellMinWidth = 100,
		},
	};
}

Link

Styling of <MudLink />.

• Underline (enum): Applies an underline to the link. Defaults to Hover.

<MudMarkdown
	Value="some markdown value"
	Styling="Styling"
/>

@code
{
	private static readonly MudMarkdownStyling Styling = new()
	{
		Link =
		{
			Underline = Underline.Always,
		},
	};
}

CodeBlock

Styling of <MudCodeHighlight />.

• Theme (enum): Sets the theme of the code block. Defaults to Default.
• CopyButton (enum): Gets or sets how the copy button is displayed in the code block. Defaults to OnHover
  • None: No copy button is displayed.
  • OnHover: The copy button is absolutely positioned and only visible when the user hovers over the code block.
  • Sticky: The copy button is always visible and positioned in a fixed location within the code block.
• CopyButtonText (string): Gets or sets the text displayed on the copy button. If null "Copied!" will be displayed. Defaults to null.

<MudMarkdown
	Value="some markdown value"
	Styling="Styling"
/>

@code
{
	private static readonly MudMarkdownStyling Styling = new()
	{
		CodeBlock =
		{
			Theme = CodeBlockTheme.DraculaBase16,
		},
	};
}

Props

Define custom behaviour of the markdown component.

Link

Behaviour of <MudLink />.

• Command (ICommand): Gets or sets a custom command that is invoked when a link is clicked. Defaults to null.
• OverrideUrl (Func<LinkInline, string?>): Gets or sets a custom function that can override the URL text. Defaults to null.
• DisableTargetBlank (bool): Gets or sets a value indicating whether the target="_blank" attribute is disabled for external links. Defaults to false.

<MudMarkdown
	Value="some markdown value"
	Props="Props"
/>

@code
{
	private static readonly MudMarkdownProps Props = new()
	{
		Link =
		{
			Command = ReactiveCommand.Create<string>(url => Debug.WriteLine($"URL clicked, url=`{url}`")), // Using ReactiveUI
			OverrideUrl = OverrideLinkUrl,
			DisableTargetBlank = true,
		},
	};

	private static string? OverrideLinkUrl(LinkInline x)
	{
		if (string.IsNullOrEmpty(x.Url))
			return null;

		if (x.Url.StartsWith('a'))
			return "http://localhost:15310";
		if (x.Url.EndsWith("cool"))
			return "https://mudblazor.com/";

		return null;
	}
}

Heading

Behaviour of the heading <MudText />.

• OverrideTypo (Func<Typo, Typo>): Gets or sets a custom function that defines what heading tag will be rendered. Defaults to null.

<MudMarkdown
	Value="some markdown value"
	Props="Props"
/>

@code
{
	private static readonly MudMarkdownProps Props = new()
	{
		Heading =
		{
			OverrideTypo = OverrideTypo,
		},
	};

	private static Typo OverrideTypo(Typo x)
	{
		return x switch
		{
			Typo.h1 => Typo.h4,
			Typo.h2 => Typo.h1,
			Typo.h3 => Typo.h2,
			_ => x,
		};
	}
}

MarkdownPipeline

Gets or sets a custom markdown pipeline. Defaults to the following implementation.

new MarkdownPipelineBuilder()
	.UseAdvancedExtensions()
	.Build()

<MudMarkdown
	Value="some markdown value"
	MarkdownPipeline="MarkdownPipeline"
/>

@code
{
	private static readonly MarkdownPipeline MarkdownPipeline =
		new MarkdownPipelineBuilder()
			.UseDiagrams()
			.UseMathematics()
			.UseEmojiAndSmiley()
			.UseFooters()
			.Build();
}