RazorComponents.Markdown
Razor component for Markdown rendering.
Online demo:
Features
Most features are based on Markdig.
- 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
Usage
- Add the newest package on NuGet.
Visit https://www.nuget.org/packages/StardustDL.RazorComponents.Markdown for all versions.
dotnet add package StardustDL.RazorComponents.MarkdownFor latest build, use the following source. https://sparkshine.pkgs.visualstudio.com/StardustDL/_packaging/feed/nuget/v3/index.json
- Add static assets to
index.html.
<link rel="stylesheet" type="text/css" href="_content/StardustDL.RazorComponents.Markdown/prismjs/themes/prism.css">
<link rel="stylesheet" type="text/css" href="_content/StardustDL.RazorComponents.Markdown/katex/katex.min.css">
<link rel="stylesheet" type="text/css" href="_content/StardustDL.RazorComponents.Markdown/css/markdown.css">
<script src="_content/StardustDL.RazorComponents.Markdown/component-min.js" type="text/javascript"></script>
<script src="_content/StardustDL.RazorComponents.Markdown/mermaid/mermaid.min.js" type="text/javascript"></script>
<script src="_content/StardustDL.RazorComponents.Markdown/prismjs/components/prism-core.min.js"></script>
<script src="_content/StardustDL.RazorComponents.Markdown/prismjs/plugins/autoloader/prism-autoloader.min.js"></script>- Add services.
using StardustDL.RazorComponents.Markdown;
builder.Services.AddMarkdownComponent();- Use the component in Razor components.
<StardustDL.RazorComponents.Markdown.MarkdownRenderer Value="@MarkdownText" Class="your class" Style="your styles"/>Configuration
Use IMarkdownComponentService to configure.
Service.EnableCodeHighlight = true;
Service.EnableDiagrams = true;
Service.EnableMathematics = true;If you want to customize Markdown's parser pipeline, you can inherit inherit MarkdownComponentService and override the method GetPipeline().
If you want to customize the all things, you can inherit inherit MarkdownComponentService and override the method RenderHTML(string).
For custom IMarkdownComponentService, use the codes below to inject services.
builder.Services.AddSingleton<IMarkdownComponentService, MarkdownComponentService>();Preview
Here are some screenshots from the demo project.
Header
Code with highlighting
Extensions
Mathematics
Diagram
Dependencies
License
Apache-2.0