RazorComponents.Markdown

Razor component for Markdown rendering.

Online demo:

• GitHub Pages
• Gitee Pages

Features

• Abbreviations
• Auto identifiers
• Citations
• Custom containers
• Definition lists
• Emphasis extras
• Figures
• Footers
• Footnotes
• GridTables
• Mathematics
• Media links
  • Youtube
  • Bilibili
  • Netease music
• Pipe tables
• Task lists
• Diagrams, flowcharts
• Auto links
• Smarty pants
• Emoji
• Code highlighting
• Delay rendering for less CPU intensive
• HTML Sanitizing to prevent XSS

Usage

Add the newest package on NuGet.

dotnet add package StardustDL.RazorComponents.Markdown

Install

This project is built on Modulight.

Here are the example codes, which based on the instructions from Usage and Use Razor Component Modules. See demo for details.

WebAssembly

// in Program.cs

public static async Task Main(string[] args) 
{ 
    var builder = WebAssemblyHostBuilder.CreateDefault(args); 
    builder.RootComponents.Add<App>("app");

    builder.Services.AddModules(builder => 
    { 
        builder.UseRazorComponentClientModules().AddMarkdownModule(); 
    }); 

    builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); 

    // Attention: RunAsyncWithModules
    await builder.Build().RunAsyncWithModules(); 
} 

Razor Pages

// in App.razor

<Modulight.Modules.Client.RazorComponents.UI.ResourceDeclare />

// in Startup: void ConfigureServices(ISeviceCollection services)

using StardustDL.RazorComponents.Markdown;

services.AddModules(builder => {
    builder.UseRazorComponentClientModules().AddMarkdownModule();
});

// Generic hosting. (provided by package Modulight.Modules.Hosting, need to add this package)
// in Program: Task Main(string[] args)

using Microsoft.Extensions.Hosting;

await CreateHostBuilder(args).Build().RunAsyncWithModules();

Using

<StardustDL.RazorComponents.Markdown.MarkdownRenderer
    Value="@MarkdownText"
    Class="your class"
    Style="your styles"
    RenderInterval="@TimeSpan.FromSeconds(10)"/>

Parameters:

• Value Raw Markdown (String)
• Class class attribute
• Style style attribute
• RenderInterval Delay rendering interval (TimeSpan), default null for no delay.
• EnableCodeHighlighting Highlighing code blocks, default true.
• EnableDiagrams Rendering diagrams, default true.
• EnableMathematics Rendering LaTex lines, default true.
• EnableHtmlSanitizing Sanitizing the final HTML to prevent XSS, default true.

Preview

Here are some screenshots from the demo project.

Header

Code with highlighting

Extensions

Mathematics

Diagram

Dependencies

• Markdig
• HtmlSanitizer
• Katex
• Mermaid.js
• PrismJS

License

Apache-2.0