MarkdownViewer
MdViewer
MD
MdViewer
MD
BitMarkdownViewer is a SEO friendly Blazor wrapper around the famous markedjs library.
Notes
To use this component, you need to install the Bit.BlazorUI.Extras nuget package, as described in the Optional steps of the Getting started page.
To utilize the prerender mode you need to install the Jint nuget package on the Server project that is responsible for the prerendering.
Usage
Basic
Marked in the browser
Rendered by marked.
Advanced
🧾 Introduction
At bitplatform, we've curated a comprehensive toolkit to empower you in crafting the finest projects using Blazor. Diverging from others merely offering UI Toolkits, bit BlazorUI components distinguishes itself with over 80 components, with a compact size of under 400 KB. These components boast both Dark and Light Themes, delivering unparalleled High Performance 🚀
Yet, bitplatform doesn't stop there. Our platform introduces exclusive tools that elevate your development experience:
Bswup: This unique tool harnesses the power of Progressive Web Apps (PWA) within the innovative new structure of dotnet 8. By amalgamating pre-rendering techniques reminiscent of renowned platforms like GitHub, Reddit, and Facebook, Bswup ensures an exceptional user experience 😍
Butil: Embracing Blazor because of your love for C#? Butil enables you to stay true to that sentiment by providing essential Browser APIs in C#, eliminating the need to revert to JavaScript for any functionality 👌
Besql: Dreaming of an offline web application capable of saving data and syncing later? Enter Besql, your solution to incorporating ef core & sqlite in your browser. It's a crucial aid for achieving this objective seamlessly 🕺
Bit Boilerplate Project Template: If the aforementioned features have piqued your interest, dive into the Bit Boilerplate project template. Experience everything mentioned above along with additional features such as ASP.NET Core Identity integration, multilingualism, and other cool features that empowers you to develop unified Web, Android, iOS, Windows, and macOS apps from a single codebase, while providing seamless integration with native platform features and third-party Java, Kotlin, Swift, Objective-C, and JavaScript libraries 💯
For more details, visit us at bitplatform.dev.
Note: This project is tested with BrowserStack.
🎁 OSS Showcases
The following apps are our open-source projects powered by the bit platform showcasing the different capabilities of our toolchain:
| Web | iOS | Android | Windows | macOS | |
|---|---|---|---|---|---|
| bitplatform |  |
N/A | N/A | N/A | N/A |
| Sales | |
Soon! | Soon! |  |
Soon! |
| bit BlazorUI | |
 |
 |
|
 |
| AdminPanel | |
|
|
|
|
| Todo | |
|
|
|
|
- bitplatform.dev: .NET 9 Pre-rendered PWA with Blazor WebAssembly (Azure Web App + Cloudflare CDN)
- sales.bitplatform.dev: .NET 9 Sales Pre-rendered PWA with Blazor WebAssembly (Azure Web App + Cloudflare CDN)
- blazorui.bitplatform.dev: .NET 9 Pre-rendered PWA with Blazor WebAssembly (Azure Web App + Cloudflare CDN)
- adminpanel.bitplatform.dev: .NET 9 PWA with Blazor WebAssembly (Azure Web App + Cloudflare CDN)
- todo.bitplatform.dev: .NET 8 Pre-rendered PWA with Blazor WebAssembly (Azure Web App + Cloudflare CDN)
- adminpanel.bitplatform.cc: .NET 9 PWA with Blazor WebAssembly Standalone (Azure static web app)
- todo-aot.bitplatform.cc: .NET 9 AOT Compiled PWA with Blazor WebAssembly Standalone (Azure static web app)
- todo-small.bitplatform.cc: .NET 9 Todo demo app with smaller download footprint (Azure static web app)
- todo-offline.bitplatform.cc: .NET 9 Todo demo app with ef-core & sqlite (Azure static web app)
Todo & Adminpanel web apps will launch their respective Android and iOS applications if you have already installed them, mirroring the behavior of apps like YouTube and Instagram.
Prerendering combined with PWA functionality delivers an experience akin to that of GitHub and Reddit. The bitplatform solution, seamlessly integrated with the innovative new .NET 8 project structure, stands as the exclusive remedy for such a scenario within the realm of Blazor.
How to contribute?
We welcome contributions! Many people all over the world have helped make this project better.
- Contributing explains what kinds of contributions we welcome.
- Build Instructions explains how to build and test.
- Get Up and Running on bit platform explains how to get the latest builds and their libraries to test them in your own projects.
Contributions
Events
Events of the BitMarkdownViewer:
- OnParsing
- OnParsed
- OnRendered
Parsing at [2025-12-20T10:27:35.5473751+01:00]
Parsed at [2025-12-20T10:27:36.1282738+01:00]
Rendered at []
API
BitMarkdownViewer parameters
Name |
Type |
Default value |
Description |
|---|---|---|---|
| Markdown | string? | null | The Markdown string value to render as an html element. |
| OnParsing | EventCallback<string?> | null | A callback that is called before starting to parse the markdown. |
| OnParsed | EventCallback<string?> | null | A callback that is called after parsing the markdown. |
| OnRendered | EventCallback<string?> | null | A callback that is called after rendering the parsed markdown. |
BitComponentBase parameters
Name |
Type |
Default value |
Description |
|---|---|---|---|
| AriaLabel | string? | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | BitDir? | null | Gets or sets the text directionality for the component's content. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | string? | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | bool | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | string? | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | string? | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | BitVisibility | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
BitComponentBase public members
Name |
Type |
Default value |
Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | ElementReference | Gets the reference to the root HTML element associated with this component. |
BitVisibility enum
Name |
Value |
Description |
|---|---|---|
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
BitDir enum
Name |
Value |
Description |
|---|---|---|
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
Feedback
You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.
Or you can review / edit this page on GitHub.
Or you can review / edit this component on GitHub.
- On this page