{"id":19100282,"url":"https://github.com/MyNihongo/MudBlazor.Markdown","last_synced_at":"2025-04-18T17:33:09.024Z","repository":{"id":37981977,"uuid":"385489244","full_name":"MyNihongo/MudBlazor.Markdown","owner":"MyNihongo","description":"Markdown component based on the MudBlazor environment","archived":false,"fork":false,"pushed_at":"2024-10-23T22:50:42.000Z","size":1472,"stargazers_count":134,"open_issues_count":0,"forks_count":12,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-24T11:55:02.949Z","etag":null,"topics":["blazor","blazor-client","blazor-components","blazor-server","blazor-webassembly","markdown","material","mudblazor","netcore","wasm"],"latest_commit_sha":null,"homepage":"https://mudblazor.com/","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MyNihongo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-13T05:41:10.000Z","updated_at":"2024-10-23T22:49:50.000Z","dependencies_parsed_at":"2024-01-09T02:27:11.316Z","dependency_job_id":"af68f52c-7f85-4e70-b284-02a6a20c9445","html_url":"https://github.com/MyNihongo/MudBlazor.Markdown","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MyNihongo%2FMudBlazor.Markdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MyNihongo%2FMudBlazor.Markdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MyNihongo%2FMudBlazor.Markdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MyNihongo%2FMudBlazor.Markdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MyNihongo","download_url":"https://codeload.github.com/MyNihongo/MudBlazor.Markdown/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223783092,"owners_count":17201903,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","blazor-client","blazor-components","blazor-server","blazor-webassembly","markdown","material","mudblazor","netcore","wasm"],"created_at":"2024-11-09T03:52:43.716Z","updated_at":"2025-04-18T17:33:09.015Z","avatar_url":"https://github.com/MyNihongo.png","language":"C#","funding_links":[],"categories":["markdown","C# #"],"sub_categories":[],"readme":"[![Version](https://img.shields.io/nuget/v/MudBlazor.Markdown?style=plastic)](https://www.nuget.org/packages/MudBlazor.Markdown/)\n[![Nuget downloads](https://img.shields.io/nuget/dt/MudBlazor.Markdown?label=nuget%20downloads\u0026logo=nuget\u0026style=plastic)](https://www.nuget.org/packages/MudBlazor.Markdown/)  \n# Markdown component for [MudBlazor](https://github.com/MudBlazor/MudBlazor)\n\nThis 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).\n\n## Update guide\nFor guidance with update errors please visit the [wiki page](https://github.com/MyNihongo/MudBlazor.Markdown/wiki/Update-guide).\n\n## Getting started\n\u003e 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.  \n\u003e Specify `@rendermode=\"InteractiveServer\"` on the markdown component to make it work (e.g. `\u003cMudMarkdown @rendermode=\"InteractiveServer\" Value=\"some markdown here\" /\u003e`)\n\nInstall the NuGet package.\n```\ndotnet add package MudBlazor.Markdown\n```\nAdd the following using statement in `_Imports.razor`.\n```razor\n@using MudBlazor\n```\nAdd the following nodes in either `App.razor` or `MainLayout.razor`.\n```razor\n\u003cMudThemeProvider /\u003e\n\u003cMudPopoverProvider /\u003e\n\u003cMudDialogProvider /\u003e\n\u003cMudSnackbarProvider /\u003e\n```\nAdd the following nodes in `Pages/_Host.cstml` (Server) or `wwwroot/index.html` (WebAssembly).  \nIn the `\u003chead\u003e` node add these CSS stylesheets.\n```html\n\u003clink href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500,700\u0026display=swap\" rel=\"stylesheet\" /\u003e\n\u003clink href=\"_content/MudBlazor/MudBlazor.min.css\" rel=\"stylesheet\" /\u003e\n\u003clink href=\"_content/MudBlazor.Markdown/MudBlazor.Markdown.min.css\" rel=\"stylesheet\" /\u003e\n```\nAt the bottom of the `\u003cbody\u003e` node add this JS source.\n```html\n\u003cscript src=\"_content/MudBlazor/MudBlazor.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"_content/MudBlazor.Markdown/MudBlazor.Markdown.min.js\"\u003e\u003c/script\u003e\n```\nRegister MudBlazor services in the DI container.  \nFor the Blazor Server in the `Startup.cs` add this method.\n```cs\npublic void ConfigureServices(IServiceCollection services)\n{\n    services.AddMudServices();\n    services.AddMudMarkdownServices();\n    // Optionally if the default clipboard functionality fails it is possible to add a custom service\n    // NB! MauiClipboardService is just an example\n    services.AddMudMarkdownClipboardService\u003cMauiClipboardService\u003e();\n}\n```\nFor the Blazor WebAssembly in the `Program.cs` add this method.\n```cs\nvar builder = WebAssemblyHostBuilder.CreateDefault(args);\nbuilder.Services.AddMudServices();\nbuilder.Services.AddMudMarkdownServices();\n// Optionally if the default clipboard functionality fails it is possible to add a custom service\n// NB! MauiClipboardService is just an example\nbuilder.Services.AddMudMarkdownClipboardService\u003cMauiClipboardService\u003e();\n```\n## Using the component\n```razor\n\u003cMudText Typo=\"Typo.h3\"\u003eMy markdown\u003c/MudText\u003e\n\u003cMudMarkdown Value=\"@Value\" /\u003e\n\n@code\n{\n    private string Value { get; } = \"text *italics* and **bold**\";\n}\n```\n### Available properties\n- `Value` - string value of the markdown text;\n- `LinkCommand` - `\u003cMudLink\u003e` components will not navigate to the provided URL, but instead invoke the command. If the property is `null` then `\u003cMudLink\u003e` will navigate to the link automatically (behaviour of `\u003ca\u003e`);\n- `TableCellMinWidth` - minimum width (in pixels) for a table cell. If the property is `null` or negative the min width is not applied;\n- `OverrideHeaderTypo` - override a Typo parameter for tags `\u003ch1\u003e`, `\u003ch2\u003e`, etc.;\n- `OverrideLinkUrl` - override a URL address for links;\n- `CodeBlockTheme` - default theme for code blocks;\n- `Styling` - override default styling.\n### Palette (colour) configurations\nUseful links for configuring the palette:\n- [Default theme](https://mudblazor.com/customization/default-theme#mudtheme) - all CSS variables and their default values\n- [Overview](https://mudblazor.com/customization/overview#theme-provider) - how the theme can be configured\n\nThe `\u003cMudMarkdown\u003e` supports the palette of the `MudTheme` which makes styling easy (we hope). These are the colors which are used in the `\u003cMudMarkdown\u003e`:\n- DrawerBackground - background-color of the quoted text;\n- ChipDefault - background-color of the code block;\n- TextDisabled - border-color of the quoted text and border-color of the h1 and h2 bottom divider;\n- TextPrimary - regular text in the markdown;\n- TextSecondary - the colour of the quoted text;\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMyNihongo%2FMudBlazor.Markdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMyNihongo%2FMudBlazor.Markdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMyNihongo%2FMudBlazor.Markdown/lists"}