### Add MudBlazor.Markdown NuGet Package Source: https://github.com/mynihongo/mudblazor.markdown/blob/main/README.md Install the MudBlazor.Markdown NuGet package using the .NET CLI. ```bash dotnet add package MudBlazor.Markdown ``` -------------------------------- ### Inline Math Example Source: https://github.com/mynihongo/mudblazor.markdown/blob/main/samples/MudBlazor.Markdown.Core/Resources/test_large.md Shows how to include inline mathematical equations using LaTeX syntax within Markdown. ```latex $\\omega = d\\phi / dt$ ``` -------------------------------- ### Basic Shell Command Example Source: https://github.com/mynihongo/mudblazor.markdown/blob/main/samples/MudBlazor.Markdown.Core/Resources/test_large.md Demonstrates a simple shell command for iteration. Use this for basic scripting or command-line tasks. ```shell # Let me re-iterate ... for i in 1 .. 10 { do-something(i) } ``` -------------------------------- ### Markdown Definition List Example Source: https://github.com/mynihongo/mudblazor.markdown/blob/main/samples/MudBlazor.Markdown.Core/Resources/test_large.md Shows how to create a definition list in Markdown. Each term is followed by its definition, indented. ```markdown apples : Good for making applesauce. oranges : Citrus! tomatoes : There's no "e" in tomatoe. ``` -------------------------------- ### Display Math Example Source: https://github.com/mynihongo/mudblazor.markdown/blob/main/samples/MudBlazor.Markdown.Core/Resources/test_large.md Demonstrates how to format display math equations on their own line using double dollar signs and LaTeX syntax. ```latex $$I = \\int \\rho R^{2} dV$$ ``` -------------------------------- ### Python Syntax Highlighting Example Source: https://github.com/mynihongo/mudblazor.markdown/blob/main/samples/MudBlazor.Markdown.Core/Resources/test_large.md Shows a Python script with comments and time delays, suitable for demonstrating syntax highlighting in Markdown. ```python import time # Quick, count to ten! for i in range(10): # (but not *too* quick) time.sleep(0.5) print i ``` -------------------------------- ### Markdown Table Example Source: https://github.com/mynihongo/mudblazor.markdown/blob/main/samples/MudBlazor.Markdown.Core/Resources/test_large.md Illustrates a basic Markdown table structure for presenting tabular data. Ensure consistent column alignment. ```markdown size material color ---- ------------ ------------ 9 leather brown 10 hemp canvas natural 11 glass transparent ``` -------------------------------- ### Multi-line Markdown Table Example Source: https://github.com/mynihongo/mudblazor.markdown/blob/main/samples/MudBlazor.Markdown.Core/Resources/test_large.md Demonstrates a Markdown table with multi-line content within cells. Useful for detailed descriptions in tables. ```markdown -------- ----------------------- keyword text -------- ----------------------- red Sunsets, apples, and other red or reddish things. green Leaves, grass, frogs and other things it's not easy being. -------- ----------------------- ``` -------------------------------- ### Markdown Table Example Source: https://github.com/mynihongo/mudblazor.markdown/blob/main/samples/MudBlazor.Markdown.Core/sample-issues.md A Markdown table demonstrating permissions, types, and granted through information. Used in lists and documentation. ```markdown |Permission | Type | Granted Through| |--|--|--| |User.Read | Delegated | Admin consent| | User.ReadBasic.All |Delegated| Admin consent| |User.Read.All|Delegated| Admin consent| |Directory.Read.Alll|Delegated| Admin consent| |Directory.AccessAsUser.All|Delegated| Admin consent| |User.Invite.All|Application| Admin consent| |Directory.Read.All|Application| Admin consent| |User.Read.All|Application| Admin consent| ``` -------------------------------- ### Markdown Line Block Example Source: https://github.com/mynihongo/mudblazor.markdown/blob/main/samples/MudBlazor.Markdown.Core/Resources/test_large.md Illustrates a Markdown line block, preserving line breaks and indentation. Useful for poetry or specific formatting. ```markdown | Line one | Line too | Line tree ``` -------------------------------- ### Indented Code Block Example Source: https://github.com/mynihongo/mudblazor.markdown/blob/main/samples/MudBlazor.Markdown.Core/sample-issues.md Demonstrates an indented code block. Ensure proper indentation for code blocks. ```plaintext if { return; } ``` -------------------------------- ### Configure MarkdownPipeline with Extensions Source: https://context7.com/mynihongo/mudblazor.markdown/llms.txt Pass a custom MarkdownPipeline to MudMarkdown to enable extensions like mathematics, emojis, footers, and diagrams. This example shows how to build a pipeline with multiple extensions. ```razor @code { private static readonly MarkdownPipeline _pipeline = new MarkdownPipelineBuilder() .UseMathematics() .UseEmojiAndSmiley() .UseFooters() .UseDiagrams() .Build(); // MathJax inline ($...$) and block ($$...$$) notation private const string _mathMarkdown = """ Inline math: $E = mc^2$ Block math: $$ \int_0^\infty e^{-x^2}\,dx = \frac{\sqrt{\pi}}{2} $$ :smile: Hello with emoji! """; } ``` -------------------------------- ### Razor Page Structure Source: https://github.com/mynihongo/mudblazor.markdown/blob/main/samples/MudBlazor.Markdown.Core/sample-issues.md A basic Razor page structure for an index page, including page directives and view data setup. ```razor @page @model IndexModel @{ ViewData["Title"] = "Home Page"; }

@ViewData["Title"]

``` -------------------------------- ### Override MudMarkdown Heading Tag Source: https://github.com/mynihongo/mudblazor.markdown/wiki/MudMarkdown-properties Customize the HTML tag rendered for headings in MudMarkdown. This example shows how to map different heading levels (h1, h2, h3) to different Typo values. ```razor @code { private static readonly MudMarkdownProps Props = new() { Heading = { OverrideTypo = OverrideTypo, }, }; private static Typo OverrideTypo(Typo x) { return x switch { Typo.h1 => Typo.h4, Typo.h2 => Typo.h1, Typo.h3 => Typo.h2, _ => x, }; } } ``` -------------------------------- ### Hello World Go Source: https://github.com/mynihongo/mudblazor.markdown/blob/main/samples/MudBlazor.Markdown.Core/sample.md A simple 'Hello, World!' program in Go. ```go func main() { fmt.Println("Hello, 世界") } ``` -------------------------------- ### Hello World Kotlin Source: https://github.com/mynihongo/mudblazor.markdown/blob/main/samples/MudBlazor.Markdown.Core/sample.md A simple 'Hello, World!' program in Kotlin. ```kotlin fun main(args : Array) { println("Hello, 世界!") } ``` -------------------------------- ### Add MudBlazor CSS Stylesheets Source: https://github.com/mynihongo/mudblazor.markdown/blob/main/README.md Add the MudBlazor and MudBlazor.Markdown CSS stylesheets to the section of your _Host.cstml (Server) or index.html (WebAssembly) file. ```html ``` -------------------------------- ### Add MudBlazor JavaScript Source: https://github.com/mynihongo/mudblazor.markdown/blob/main/README.md Add the MudBlazor and MudBlazor.Markdown JavaScript files to the bottom of the section of your _Host.cstml (Server) or index.html (WebAssembly) file. ```html ``` -------------------------------- ### Include MudBlazor and MudBlazor.Markdown CSS and JS Source: https://context7.com/mynihongo/mudblazor.markdown/llms.txt Ensure MudBlazor and MudBlazor.Markdown CSS and JavaScript files are included in your application's host file (_Host.cshtml for Server, index.html for WASM). ```html ... ``` -------------------------------- ### Register MudBlazor Services (Blazor Server) Source: https://github.com/mynihongo/mudblazor.markdown/blob/main/README.md Register MudBlazor and MudBlazor.Markdown services in the ConfigureServices method of your Startup.cs file for Blazor Server applications. ```csharp 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(); } ``` -------------------------------- ### Register MudBlazor Services (Blazor WebAssembly) Source: https://github.com/mynihongo/mudblazor.markdown/blob/main/README.md Register MudBlazor and MudBlazor.Markdown services in the Program.cs file for Blazor WebAssembly applications. ```csharp 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(); ``` -------------------------------- ### Add MudBlazor Using Statement Source: https://github.com/mynihongo/mudblazor.markdown/blob/main/README.md Add the MudBlazor using statement to your _Imports.razor file. ```razor @using MudBlazor ``` -------------------------------- ### Custom Clipboard Provider for MAUI Hybrid Apps Source: https://context7.com/mynihongo/mudblazor.markdown/llms.txt Implement IMudMarkdownClipboardService for environments where the default JavaScript clipboard API is not available, such as MAUI Hybrid applications. Register your custom service using AddMudMarkdownClipboardService(). ```csharp // Custom implementation for .NET MAUI Hybrid public sealed class MauiClipboardService : IMudMarkdownClipboardService { public async ValueTask CopyToClipboardAsync(string text) { await Microsoft.Maui.ApplicationModel.DataTransfer.Clipboard .SetTextAsync(text) .ConfigureAwait(false); } } // Registration in MauiProgram.cs builder.Services.AddMudMarkdownServices(); builder.Services.AddMudMarkdownClipboardService(); ``` -------------------------------- ### Runtime Code-Block Theme Switching with IMudMarkdownThemeService Source: https://context7.com/mynihongo/mudblazor.markdown/llms.txt Inject IMudMarkdownThemeService to change code block themes at runtime. This is useful for implementing dark/light mode toggles. ```csharp // Inject and use in any Razor component or service public class AppThemeService { private readonly IMudMarkdownThemeService _markdownThemeService; public AppThemeService(IMudMarkdownThemeService markdownThemeService) { _markdownThemeService = markdownThemeService; } public void ApplyDarkTheme() => _markdownThemeService.SetCodeBlockTheme(CodeBlockTheme.DraculaBase16); public void ApplyLightTheme() => _markdownThemeService.SetCodeBlockTheme(CodeBlockTheme.Monokai); } ``` ```razor @* Toggle button in a layout component *@ @inject IMudMarkdownThemeService MarkdownTheme @code { private bool _isDark; private void ToggleDark() { _isDark = !_isDark; MarkdownTheme.SetCodeBlockTheme( _isDark ? CodeBlockTheme.DraculaBase16 : CodeBlockTheme.Github); } } ``` -------------------------------- ### Register MudBlazor and MudMarkdown Services Source: https://context7.com/mynihongo/mudblazor.markdown/llms.txt Register MudBlazor and MudMarkdown services in the DI container. The `AddMudMarkdownServices` extension includes an in-memory cache with a default TTL of 1 hour. Custom cache TTL and clipboard services can also be configured. ```csharp public void ConfigureServices(IServiceCollection services) { services.AddMudServices(); // Register with default cache (1 h TTL) services.AddMudMarkdownServices(); // Or customise the cache TTL services.AddMudMarkdownServices(static cache => { cache.TimeToLive = TimeSpan.FromHours(2); }); // Optional: replace the default JS clipboard with a platform-specific one services.AddMudMarkdownClipboardService(); } ``` ```csharp var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.Services.AddMudServices(); builder.Services.AddMudMarkdownServices(); await builder.Build().RunAsync(); ``` -------------------------------- ### Markdown Image Syntax Source: https://github.com/mynihongo/mudblazor.markdown/blob/main/samples/MudBlazor.Markdown.Core/Resources/test_large.md Demonstrates the syntax for embedding images in Markdown, including alt text and title attributes. ```markdown ![example image](example-image.jpg "An exemplary image") ``` -------------------------------- ### Read From URL Async C# Source: https://github.com/mynihongo/mudblazor.markdown/blob/main/samples/MudBlazor.Markdown.Core/sample.md Reads content from a URL, caches it, and handles exceptions. Uses HttpClient and MemoryCache. ```csharp private async ValueTask ReadFromUrlAsync(string url, CancellationToken ct = default) { if (_memoryCache.TryGetValue(url, out var value)) return value; try { value = await HttpClient.GetStringAsync(url, ct) .ConfigureAwait(false); _memoryCache.Set(url, value); return value; } catch (Exception e) { return new StringBuilder() .Append($"Error while reading from URL, URL=`{url}`") .BuildErrorMessage(e); } } ``` -------------------------------- ### Configure Custom Markdown Pipeline Source: https://github.com/mynihongo/mudblazor.markdown/wiki/MudMarkdown-properties Apply a custom markdown pipeline to MudMarkdown for extended features like diagrams, mathematics, and emojis. The default pipeline is shown for reference. ```cs new MarkdownPipelineBuilder() .UseAdvancedExtensions() .Build() ``` ```razor @code { private static readonly MarkdownPipeline MarkdownPipeline = new MarkdownPipelineBuilder() .UseDiagrams() .UseMathematics() .UseEmojiAndSmiley() .UseFooters() .Build(); } ``` -------------------------------- ### Configure MudMarkdown DI Registration with Cache TTL Source: https://context7.com/mynihongo/mudblazor.markdown/llms.txt Register MudMarkdown services using AddMudMarkdownServices. Configure the in-memory cache Time To Live (TTL) using an optional delegate. A TTL of zero disables caching. ```csharp // Default: cache TTL = 1 hour services.AddMudMarkdownServices(); // Custom TTL services.AddMudMarkdownServices(options => { options.TimeToLive = TimeSpan.FromMinutes(30); }); // Disable caching entirely (TTL = zero means items expire immediately) services.AddMudMarkdownServices(options => { options.TimeToLive = TimeSpan.Zero; }); ``` -------------------------------- ### Select Code Block Syntax Highlighting Theme Source: https://context7.com/mynihongo/mudblazor.markdown/llms.txt Choose a syntax-highlighting color scheme for code blocks using the `CodeBlockTheme` enum within the `Styling` parameter. Over 200 themes are available. ```razor @* A few representative themes *@ @* Available theme examples: CodeBlockTheme.Default (highlight.js default) CodeBlockTheme.DraculaBase16 CodeBlockTheme.MonokaiSublime CodeBlockTheme.Nord CodeBlockTheme.SolarizedDarkBase16 CodeBlockTheme.GithubDark CodeBlockTheme.AtomOneDark CodeBlockTheme.Vs2015 CodeBlockTheme.Xcode *@ ``` -------------------------------- ### Add MudBlazor Providers Source: https://github.com/mynihongo/mudblazor.markdown/blob/main/README.md Include the necessary MudBlazor provider components in your App.razor or MainLayout.razor file. ```razor ``` -------------------------------- ### Basic MudMarkdown Component Usage Source: https://github.com/mynihongo/mudblazor.markdown/blob/main/README.md Demonstrates how to use the MudMarkdown component in a Blazor page to render markdown text. Ensure to specify @rendermode="InteractiveServer" for Blazor Server applications. ```razor My markdown @code { private string Value { get; } = "text *italics* and **bold**"; } ``` -------------------------------- ### Configure MudMarkdown Runtime Props Source: https://context7.com/mynihongo/mudblazor.markdown/llms.txt Control runtime behavior like link clicks, URL overrides, and disabling `target="_blank"` using the `Props` parameter with `MudMarkdownProps`. Heading typography can also be remapped. ```razor @code { private static readonly MudMarkdownProps _props = new() { Link = { Command = ReactiveCommand.Create(url => Console.WriteLine($"Link clicked: {url}")), OverrideUrl = link => { if (link.Url?.StartsWith("/internal/") == true) return link.Url.Replace("/internal/", "/app/"); return null; }, DisableTargetBlank = false, }, Heading = { OverrideTypo = typo => typo switch { Typo.h1 => Typo.h4, Typo.h2 => Typo.h1, Typo.h3 => Typo.h2, _ => typo, }, }, }; private const string _markdown = @""" # Big heading (rendered as h4) [Click me](/internal/page) """; } ``` -------------------------------- ### Customize MudMarkdown Styling Source: https://context7.com/mynihongo/mudblazor.markdown/llms.txt Use the `Styling` parameter with a `MudMarkdownStyling` instance to customize tables, links, and code blocks. Sub-properties have sensible defaults. ```razor @code { private static readonly MudMarkdownStyling _styling = new() { Table = { IsStriped = true, IsBordered = true, Elevation = 4, CellMinWidth = 120, Dense = false, }, Link = { Underline = Underline.Always, }, CodeBlock = { Theme = CodeBlockTheme.DraculaBase16, CopyButton = CodeBlockCopyButton.Sticky, CopyButtonText = "Copied!", }, }; private const string _markdown = @""" | Name | Value | |-------|-------| | Alpha | 1 | | Beta | 2 | ```python def greet(name): return f"Hello, {name}!" ``` Visit [MudBlazor](https://mudblazor.com). """; } ``` -------------------------------- ### MudMarkdown Component with Different Source Types Source: https://context7.com/mynihongo/mudblazor.markdown/llms.txt Utilize the `SourceType` and `Value` parameters to specify the Markdown content source. Options include raw string, a server file path, or a remote URL. File and URL content is cached in memory. ```razor @* RawValue (default) – inline Markdown string *@ @* File – path to a .md file served by the application *@ @* Url – fetches Markdown from a remote HTTP URL *@ ``` -------------------------------- ### MySQL User Authentication Update (Bash) Source: https://github.com/mynihongo/mudblazor.markdown/blob/main/samples/MudBlazor.Markdown.Core/sample-issues.md Command to update a MySQL user's authentication method to caching_sha2_password. Use this to prevent deprecation warnings. ```bash mysql -u username -p ``` -------------------------------- ### Minimal MudMarkdown Component Usage Source: https://context7.com/mynihongo/mudblazor.markdown/llms.txt Render a raw Markdown string using the `` component. For Static SSR pages, ensure an interactive render mode is specified. ```razor @* Minimal usage – raw Markdown string *@@ @* Static SSR pages require explicit interactive render mode *@ @code { private const string _markdown = """ # Hello MudBlazor.Markdown Render **bold**, *italic*, `inline code`, and [links](https://mudblazor.com). ```csharp Console.WriteLine(\"syntax highlighted!\"); ``` """; } ``` -------------------------------- ### MudMarkdown File SourceType Source: https://github.com/mynihongo/mudblazor.markdown/wiki/MudMarkdown-properties Specifies the path to a local file containing markdown content. The component will read and render the markdown from this file. ```razor ``` -------------------------------- ### MySQL User Authentication Update (SQL) Source: https://github.com/mynihongo/mudblazor.markdown/blob/main/samples/MudBlazor.Markdown.Core/sample-issues.md SQL command to alter a MySQL user's authentication method. Replace placeholders with actual credentials. ```sql ALTER USER 'username'@'hostname' IDENTIFIED WITH caching_sha2_password; ``` -------------------------------- ### Using the Custom MudMarkdown Component Source: https://context7.com/mynihongo/mudblazor.markdown/llms.txt Integrate the custom MudMarkdown component into your Blazor application just like the standard MudMarkdown component. Pass your Markdown content via the Value parameter. ```razor @* Use it exactly like *@ ``` -------------------------------- ### MudMarkdown Url SourceType Source: https://github.com/mynihongo/mudblazor.markdown/wiki/MudMarkdown-properties Provides an HTTP URL pointing to a markdown resource. The component will fetch and render the markdown from the specified URL. ```razor ``` -------------------------------- ### Custom MudMarkdown Component for Footnotes Source: https://context7.com/mynihongo/mudblazor.markdown/llms.txt Override OnRenderMarkdownBlockDefault to handle specific block types like footnotes. Ensure the base method is called if the block type is not handled. ```csharp public class MyMudMarkdown : MudMarkdown { // Handle any block type not covered by the base switch-case protected override void OnRenderMarkdownBlockDefault( RenderTreeBuilder builder, ref int elementIndex, Markdig.Syntax.Block block) { if (block is Markdig.Extensions.Footnotes.FootnoteGroup footnotes) { builder.OpenElement(elementIndex++, "section"); builder.AddAttribute(elementIndex++, "class", "footnotes"); // … render footnotes … builder.CloseElement(); } } // Handle any inline type not covered by the base switch-case protected override void OnRenderInlinesDefault( RenderTreeBuilder builder, ref int elementIndex, Markdig.Syntax.Inlines.Inline inline) { builder.AddContent(elementIndex++, inline.ToString()); } } ``` -------------------------------- ### MudMarkdown Link Behavior Source: https://github.com/mynihongo/mudblazor.markdown/wiki/MudMarkdown-properties Customizes the behavior of links rendered from markdown. Allows setting a command to execute on click, overriding URLs, and disabling target blank for external links. ```razor @code { private static readonly MudMarkdownProps Props = new() { Link = { Command = ReactiveCommand.Create(url => Debug.WriteLine($"URL clicked, url=`{url}`")), // Using ReactiveUI OverrideUrl = OverrideLinkUrl, DisableTargetBlank = true, }, }; private static string? OverrideLinkUrl(LinkInline x) { if (string.IsNullOrEmpty(x.Url)) return null; if (x.Url.StartsWith('a')) return "http://localhost:15310"; if (x.Url.EndsWith("cool")) return "https://mudblazor.com/"; return null; } } ``` -------------------------------- ### MudMarkdown RawValue SourceType Source: https://github.com/mynihongo/mudblazor.markdown/wiki/MudMarkdown-properties Sets the markdown content directly as a string. This is the default behavior. ```razor ``` ```razor ``` -------------------------------- ### MudMarkdown Table Styling Source: https://github.com/mynihongo/mudblazor.markdown/wiki/MudMarkdown-properties Customizes the appearance of tables rendered from markdown. Options include striping, borders, elevation, cell minimum width, and dense padding. ```razor @code { private static readonly MudMarkdownStyling Styling = new() { Table = { Elevation = 16, CellMinWidth = 100, }, }; } ``` -------------------------------- ### Enable Table of Contents in MudMarkdown Source: https://context7.com/mynihongo/mudblazor.markdown/llms.txt Set `HasTableOfContents` to true to render a navigation sidebar. Use `TableOfContentsHeader` to set an optional title for the sidebar. ```razor @code { private const string _longDocument = @""" # Introduction Some text... ## Installation More text... ### Prerequisites Even more text... """; } ``` -------------------------------- ### MudMarkdown CodeBlock Styling Source: https://github.com/mynihongo/mudblazor.markdown/wiki/MudMarkdown-properties Customizes the appearance of code blocks rendered from markdown. Options include theme selection, copy button display, and copy button text. ```razor @code { private static readonly MudMarkdownStyling Styling = new() { CodeBlock = { Theme = CodeBlockTheme.DraculaBase16, }, }; } ``` -------------------------------- ### MudMarkdown Link Styling Source: https://github.com/mynihongo/mudblazor.markdown/wiki/MudMarkdown-properties Customizes the appearance of links rendered from markdown. The underline property controls whether links are underlined. ```razor @code { private static readonly MudMarkdownStyling Styling = new() { Link = { Underline = Underline.Always, }, }; } ``` -------------------------------- ### MudMarkdown HasTableOfContents Source: https://github.com/mynihongo/mudblazor.markdown/wiki/MudMarkdown-properties Enables or disables the display of a table of contents generated from the markdown headings. Defaults to false. ```razor ``` -------------------------------- ### MudMarkdown TableOfContentsHeader Source: https://github.com/mynihongo/mudblazor.markdown/wiki/MudMarkdown-properties Sets a custom title for the table of contents. This property has no effect if HasTableOfContents is false. ```razor ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.