Markdown component for MudBlazor

This README covers configuration steps for Blazor Server and Blazor WebAssembly. For images how the markup component looks like in the browser go to the README of samples.

Update guide

For guidance with update errors please visit the wiki page.

Getting started

Install the NuGet package.

dotnet add package MudBlazor.Markdown

Add the following using statement in _Imports.razor.

@using MudBlazor

Add the following nodes in either App.razor or MainLayout.razor.

<MudThemeProvider />
<MudDialogProvider />
<MudSnackbarProvider />

Add the following nodes in Pages/_Host.cstml (Server) or wwwroot/index.html (WebAssembly).
In the <head> node add these CSS stylesheets.

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
<link href="_content/MudBlazor.Markdown/MudBlazor.Markdown.min.css" rel="stylesheet" />

At the bottom of the <body> node add this JS source.

<script src="_content/MudBlazor/MudBlazor.min.js"></script>
<script src="_content/MudBlazor.Markdown/MudBlazor.Markdown.min.js"></script>

public void ConfigureServices(IServiceCollection services)
{
    services.AddMudServices();
    services.AddMudMarkdownServices();
    // Optionally if default clipboard functionality fails it is possible to add a custom service
    // NB! MauiClipboardService is just an example
    builder.Services.AddMudMarkdownClipboardService<MauiClipboardService>();
}

For the Blazor WebAssembly in the Program.cs add this method.

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.Services.AddMudServices();
builder.Services.AddMudMarkdownServices();
// Optionally if default clipboard functionality fails it is possible to add a custom service
// NB! MauiClipboardService is just an example
builder.Services.AddMudMarkdownClipboardService<MauiClipboardService>();

Using the component

<MudText Typo="Typo.h3">My markdown</MudText>
<MudMarkdown Value="@Value" />

@code
{
    private string Value { get; } = "text *italics* and **bold**";
}

Available properties

Value - string value of the markdown text;
LinkCommand - <MudLink> components will not navigate to the provided URL, but instead invoke the command. If the property is null then <MudLink> will navigate to the link automatically (behaviour of <a>);
TableCellMinWidth - minimum width (in pixels) for a table cell. If the property is null or negative the min width is not applied;
OverrideHeaderTypo - override a Typo parameter for tags <h1>, <h2>, etc.;
OverrideLinkUrl - override a URL address for links;
CodeBlockTheme - default theme for code blocks;
Styling - override default styling.

Palette (colour) configurations

Useful links for configuring the palette:

Default theme - all CSS variables and their default values
Overview - how the theme can be configured

The <MudMarkdown> supports the palette of the MudTheme which makes styling easy (we hope). These are the colors which are used in the <MudMarkdown>: