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 56 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
API
BitMarkdownViewer parameters
Name |
Type |
Default value |
Description |
|---|---|---|---|
| Markdown | string? | null | The Markdown string value to render as an html element. |
BitComponentBase parameters
Name |
Type |
Default value |
Description |
|---|---|---|---|
| AriaLabel | string? | null | The aria-label of the control for the benefit of screen readers. |
| Class | string? | null | Custom CSS class for the root element of the component. |
| Dir | BitDir? | null | Determines the component direction. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Capture and render additional attributes in addition to the component's parameters. |
| Id | string? | null | Custom id attribute for the root element. if null the UniqueId will be used instead. |
| IsEnabled | bool | true | Whether or not the component is enabled. |
| Style | string? | null | Custom CSS style for the root element of the component. |
| Visibility | BitVisibility | BitVisibility.Visible | Whether the component is visible, hidden or collapsed. |
BitComponentBase public members
Name |
Type |
Default value |
Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction. |
| RootElement | ElementReference | The ElementReference of the root element. |
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. |
- On this page