MudBlazor.Markdown 7.14.0

.NET 7.0 This package targets .NET 7.0. The package is compatible with this framework or higher. 
dotnet add package MudBlazor.Markdown --version 7.14.0                

                    
                

            
NuGet\Install-Package MudBlazor.Markdown -Version 7.14.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="MudBlazor.Markdown" Version="7.14.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
paket add MudBlazor.Markdown --version 7.14.0                

                    
                

            
#r "nuget: MudBlazor.Markdown, 7.14.0"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
// Install MudBlazor.Markdown as a Cake Addin
#addin nuget:?package=MudBlazor.Markdown&version=7.14.0

// Install MudBlazor.Markdown as a Cake Tool
#tool nuget:?package=MudBlazor.Markdown&version=7.14.0

Version Nuget downloads

Markdown component for MudBlazor

This README covers configuration steps for Blazor Server and Blazor WebAssembly. For images of 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

NB! MudBLazor does not work well with the static SSR format because some code is executed in OnAfterRender or OnAfterRenderAsync that is not invoked by default.
Specify @rendermode="InteractiveServer" on the markdown component to make it work (e.g. <MudMarkdown @rendermode="InteractiveServer" Value="some markdown here" />)

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 />
<MudPopoverProvider />
<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>

Register MudBlazor services in the DI container.
For the Blazor Server in the Startup.cs add this method.

public void ConfigureServices(IServiceCollection services)
{
    services.AddMudServices();
    services.AddMudMarkdownServices();
    // Optionally if the default clipboard functionality fails it is possible to add a custom service
    // NB! MauiClipboardService is just an example
    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 the 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:

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;
  • ChipDefault - 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 - the colour of the quoted text;
Product Compatible and additional computed target framework versions.
.NET net7.0 is compatible.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (2)

Showing the top 2 NuGet packages that depend on MudBlazor.Markdown:

Package Downloads
MudBlazor.Extensions

MudBlazor.Extensions is a small extension library for MudBlazor from https://mudblazor.com/
MedbaseComponents

Shared view code for Medbase projects.

GitHub repositories (4)

Showing the top 4 popular GitHub repositories that depend on MudBlazor.Markdown:

Repository Stars
DragoQCC/HardHatC2
A C# Command & Control framework
fgilde/MudBlazor.Extensions
MudBlazor.Extensions from https://www.mudex.org is a small extension for MudBlazor from https://mudblazor.com
MindWorkAI/AI-Studio
AI Studio is an independent app for utilizing LLM.
discord-csharp/MODiX
Discord Bot handling basic moderation needs, soon implements statistics.
Version Downloads Last updated
7.14.0 16,100 10/23/2024
7.8.0 25,002 9/7/2024
1.0.2 55,549 6/5/2024
1.0.1 41,155 5/31/2024
1.0.0 21,329 5/19/2024
1.0.0-preview.1 49 6/6/2024
0.1.3 76,094 12/11/2023
0.1.2 51,197 8/6/2023
0.1.1 39,942 5/27/2023
0.1.0 45,307 1/15/2023
0.0.12 61,249 8/28/2022
0.0.11 40,998 7/9/2022
0.0.10 35,308 4/24/2022
0.0.9 14,986 3/24/2022
0.0.8 19,504 1/23/2022
0.0.6 16,020 12/25/2021
0.0.5 10,827 9/13/2021
0.0.4 3,925 8/22/2021
0.0.3 1,499 8/10/2021
0.0.2 385 8/8/2021
0.0.1 566 7/18/2021

https://github.com/MyNihongo/MudBlazor.Markdown/releases