Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/MyNihongo/MudBlazor.Markdown
Markdown component based on the MudBlazor environment
https://github.com/MyNihongo/MudBlazor.Markdown
blazor blazor-client blazor-components blazor-server blazor-webassembly markdown material mudblazor netcore wasm
Last synced: 4 days ago
JSON representation
Markdown component based on the MudBlazor environment
- Host: GitHub
- URL: https://github.com/MyNihongo/MudBlazor.Markdown
- Owner: MyNihongo
- License: mit
- Created: 2021-07-13T05:41:10.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-23T22:50:42.000Z (21 days ago)
- Last Synced: 2024-10-24T11:55:02.949Z (20 days ago)
- Topics: blazor, blazor-client, blazor-components, blazor-server, blazor-webassembly, markdown, material, mudblazor, netcore, wasm
- Language: C#
- Homepage: https://mudblazor.com/
- Size: 1.4 MB
- Stars: 134
- Watchers: 3
- Forks: 12
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.nuget.org/packages/MudBlazor.Markdown/)
[](https://www.nuget.org/packages/MudBlazor.Markdown/)
# Markdown component for [MudBlazor](https://github.com/MudBlazor/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](/samples).
## Update guide
For guidance with update errors please visit the [wiki page](https://github.com/MyNihongo/MudBlazor.Markdown/wiki/Update-guide).
## 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. ``)
Install the NuGet package.
```
dotnet add package MudBlazor.Markdown
```
Add the following using statement in `_Imports.razor`.
```razor
@using MudBlazor
```
Add the following nodes in either `App.razor` or `MainLayout.razor`.
```razor
```
Add the following nodes in `Pages/_Host.cstml` (Server) or `wwwroot/index.html` (WebAssembly).
In the `` node add these CSS stylesheets.
```html
```
At the bottom of the `` node add this JS source.
```html
```
Register MudBlazor services in the DI container.
For the Blazor Server in the `Startup.cs` add this method.
```cs
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();
}
```
For the Blazor WebAssembly in the `Program.cs` add this method.
```cs
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();
```
## Using the component
```razor
My markdown
@code
{
private string Value { get; } = "text *italics* and **bold**";
}
```
### Available properties
- `Value` - string value of the markdown text;
- `LinkCommand` - `` components will not navigate to the provided URL, but instead invoke the command. If the property is `null` then `` will navigate to the link automatically (behaviour of ``);
- `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 ``, ``, 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](https://mudblazor.com/customization/default-theme#mudtheme) - all CSS variables and their default values
- [Overview](https://mudblazor.com/customization/overview#theme-provider) - how the theme can be configured
The `` supports the palette of the `MudTheme` which makes styling easy (we hope). These are the colors which are used in the ``:
- 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;