Blazor-MudBlazor.Markdown

[删除（380066935@qq.com或微信通知）]

Markdown component for MudBlazor

MyNihongo/MudBlazor.Markdown: Markdown component based on the MudBlazor environment (github.com)

Markdown component for MudBlazorThis README covers configuration steps for Blazor Server and Blazor WebAssembly.

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.

Add the following nodes in Pages/_Host.cstml (Server) or wwwroot/index.html (WebAssembly).

In the <head> node add these CSS stylesheets.

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

For the Blazor Server in the Startup.cs add this method.

public void ConfigureServices(IServiceCollection services)

{

services.AddMudServices();

services.AddMudMarkdownServices();

}

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

var builder = WebAssemblyHostBuilder.CreateDefault(args);

builder.Services.AddMudServices();

builder.Services.AddMudMarkdownServices();

Using the component

<MudText Typo="Typo.h3">My markdown</MudText>

@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.

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>:

DrawerBackground - background-color of the quoted text;

OverlayDark - background-color of the code block;

TextDisabled - border-color of the quoted text and border-color of the h1 and h2 bottom divider;

TextPrimary - regular text in the markdown;

TextSecondary - color of the quoted text;