Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stardustdl/razorcomponents.markdown
Razor component for Markdown rendering.
https://github.com/stardustdl/razorcomponents.markdown
acblog blazor component-library csharp dotnet dotnet-core frontend highlighting javascript markdig markdown mermaid razor razor-components razorcomponents
Last synced: about 1 month ago
JSON representation
Razor component for Markdown rendering.
- Host: GitHub
- URL: https://github.com/stardustdl/razorcomponents.markdown
- Owner: StardustDL
- License: other
- Created: 2020-06-12T14:30:07.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-10T15:03:05.000Z (about 2 years ago)
- Last Synced: 2024-11-16T14:47:38.095Z (2 months ago)
- Topics: acblog, blazor, component-library, csharp, dotnet, dotnet-core, frontend, highlighting, javascript, markdig, markdown, mermaid, razor, razor-components, razorcomponents
- Language: C#
- Homepage: https://acblog.github.io/posts/article
- Size: 935 KB
- Stars: 31
- Watchers: 1
- Forks: 3
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# RazorComponents.Markdown
   [](https://www.nuget.org/packages/StardustDL.RazorComponents.Markdown/)
Razor component for Markdown rendering.
Online demo:
- [GitHub Pages](https://acblog.github.io/posts/article)
- [Gitee Pages](https://acblog.gitee.io/posts/article)
## 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.
```sh
dotnet add package StardustDL.RazorComponents.Markdown
```
### Install
This project is built on [Modulight](https://github.com/StardustDL/modulight).
Here 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.
**WebAssembly**
```cs
// in Program.cs
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add("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**
```cs
// in App.razor
// 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
```razor
```
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](https://github.com/lunet-io/markdig)
- [HtmlSanitizer](https://github.com/mganss/HtmlSanitizer)
- [Katex](https://github.com/KaTeX/KaTeX)
- [Mermaid.js](https://github.com/mermaid-js/mermaid)
- [PrismJS](https://github.com/PrismJS/prism)
## License
Apache-2.0