{"id":22942441,"url":"https://github.com/stardustdl/razorcomponents.markdown","last_synced_at":"2025-08-12T21:32:37.295Z","repository":{"id":37905521,"uuid":"271817868","full_name":"StardustDL/RazorComponents.Markdown","owner":"StardustDL","description":"Razor component for Markdown rendering.","archived":false,"fork":false,"pushed_at":"2023-01-10T15:03:05.000Z","size":957,"stargazers_count":31,"open_issues_count":11,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-16T14:47:38.095Z","etag":null,"topics":["acblog","blazor","component-library","csharp","dotnet","dotnet-core","frontend","highlighting","javascript","markdig","markdown","mermaid","razor","razor-components","razorcomponents"],"latest_commit_sha":null,"homepage":"https://acblog.github.io/posts/article","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/StardustDL.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}},"created_at":"2020-06-12T14:30:07.000Z","updated_at":"2024-05-10T06:56:21.000Z","dependencies_parsed_at":"2023-02-08T19:15:34.668Z","dependency_job_id":null,"html_url":"https://github.com/StardustDL/RazorComponents.Markdown","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StardustDL%2FRazorComponents.Markdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StardustDL%2FRazorComponents.Markdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StardustDL%2FRazorComponents.Markdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StardustDL%2FRazorComponents.Markdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/StardustDL","download_url":"https://codeload.github.com/StardustDL/RazorComponents.Markdown/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229710743,"owners_count":18111641,"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":["acblog","blazor","component-library","csharp","dotnet","dotnet-core","frontend","highlighting","javascript","markdig","markdown","mermaid","razor","razor-components","razorcomponents"],"created_at":"2024-12-14T13:47:50.526Z","updated_at":"2024-12-14T13:47:51.236Z","avatar_url":"https://github.com/StardustDL.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# RazorComponents.Markdown\n\n![CI](https://github.com/StardustDL/RazorComponents.Markdown/workflows/CI/badge.svg) ![CD](https://github.com/StardustDL/RazorComponents.Markdown/workflows/CD/badge.svg) ![License](https://img.shields.io/github/license/StardustDL/RazorComponents.Markdown.svg) [![downloads](https://img.shields.io/nuget/dt/StardustDL.RazorComponents.Markdown)](https://www.nuget.org/packages/StardustDL.RazorComponents.Markdown/)\n\nRazor component for Markdown rendering.\n\nOnline demo:\n\n- [GitHub Pages](https://acblog.github.io/posts/article)\n- [Gitee Pages](https://acblog.gitee.io/posts/article)\n\n## Features\n\n- Abbreviations\n- Auto identifiers\n- Citations\n- Custom containers\n- Definition lists\n- Emphasis extras\n- Figures\n- Footers\n- Footnotes\n- GridTables\n- Mathematics\n- Media links\n  - Youtube\n  - Bilibili\n  - Netease music\n- Pipe tables\n- Task lists\n- Diagrams, flowcharts\n- Auto links\n- Smarty pants\n- Emoji\n- Code highlighting\n- Delay rendering for less CPU intensive\n- HTML Sanitizing to prevent XSS\n\n## Usage\n\nAdd the newest package on NuGet.\n\n```sh\ndotnet add package StardustDL.RazorComponents.Markdown\n```\n\n### Install\n\nThis project is built on [Modulight](https://github.com/StardustDL/modulight).\n\nHere are the example codes, which based on the instructions from [Usage](https://github.com/StardustDL/modulight#usage) and [Use Razor Component Modules](https://github.com/StardustDL/modulight#use-razor-component-modules). See [demo](./demo/HostBase/Client) for details.\n\n**WebAssembly**\n\n```cs\n// in Program.cs\n\npublic static async Task Main(string[] args) \n{ \n    var builder = WebAssemblyHostBuilder.CreateDefault(args); \n    builder.RootComponents.Add\u003cApp\u003e(\"app\");\n\n    builder.Services.AddModules(builder =\u003e \n    { \n        builder.UseRazorComponentClientModules().AddMarkdownModule(); \n    }); \n\n    builder.Services.AddTransient(sp =\u003e new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); \n\n    // Attention: RunAsyncWithModules\n    await builder.Build().RunAsyncWithModules(); \n} \n```\n\n**Razor Pages**\n\n```cs\n// in App.razor\n\n\u003cModulight.Modules.Client.RazorComponents.UI.ResourceDeclare /\u003e\n\n// in Startup: void ConfigureServices(ISeviceCollection services)\n\nusing StardustDL.RazorComponents.Markdown;\n\nservices.AddModules(builder =\u003e {\n    builder.UseRazorComponentClientModules().AddMarkdownModule();\n});\n\n// Generic hosting. (provided by package Modulight.Modules.Hosting, need to add this package)\n// in Program: Task Main(string[] args)\n\nusing Microsoft.Extensions.Hosting;\n\nawait CreateHostBuilder(args).Build().RunAsyncWithModules();\n```\n\n### Using\n\n```razor\n\u003cStardustDL.RazorComponents.Markdown.MarkdownRenderer\n    Value=\"@MarkdownText\"\n    Class=\"your class\"\n    Style=\"your styles\"\n    RenderInterval=\"@TimeSpan.FromSeconds(10)\"/\u003e\n```\n\nParameters:\n\n- `Value` Raw Markdown (`String`)\n- `Class` class attribute\n- `Style` style attribute\n- `RenderInterval` Delay rendering interval (`TimeSpan`), default `null` for no delay.\n- `EnableCodeHighlighting` Highlighing code blocks, default `true`.\n- `EnableDiagrams` Rendering diagrams, default `true`.\n- `EnableMathematics` Rendering LaTex lines, default `true`.\n- `EnableHtmlSanitizing` Sanitizing the final HTML to prevent XSS, default `true`.\n\n## Preview\n\nHere are some screenshots from the demo project.\n\n### Header\n\n![](docs/images/demo1.png)\n\n### Code with highlighting\n\n![](docs/images/demo2.png)\n\n### Extensions\n\n![](docs/images/demo3.png)\n\n### Mathematics\n\n![](docs/images/demo4.png)\n\n### Diagram\n\n![](docs/images/demo5.png)\n\n## Dependencies\n\n- [Markdig](https://github.com/lunet-io/markdig)\n- [HtmlSanitizer](https://github.com/mganss/HtmlSanitizer)\n- [Katex](https://github.com/KaTeX/KaTeX)\n- [Mermaid.js](https://github.com/mermaid-js/mermaid)\n- [PrismJS](https://github.com/PrismJS/prism)\n\n## License\n\nApache-2.0\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstardustdl%2Frazorcomponents.markdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstardustdl%2Frazorcomponents.markdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstardustdl%2Frazorcomponents.markdown/lists"}