Purpose of Component

RfMarkdown takes a markdown string an renders it as a Bulma div.content.

NOTE: RfMarkdown is not an editor for markdown.

Basic Usage

The RfMarkdown requires only to set the Markdown property with a text string of markdown. All other properties are optional.

<RfMarkdown Markdown="# I'm Markdown!" />

Markdown Pipeline

RfMarkdown makes use of a nuget package Markdig. The creator of Markdig added support to modify the markdown pipeline. Rforge supports this feature by exposing the Pipeline property. By default RfMarkdown makes use of Markdig defaults plus pipe tables.

WARNING: RfMarkdown does not scrub out <script> tags from the markdown. If it matters, make sure to santize it.

Custom Skeletons

RfMarkdown supports showing a custom skeleton when the property Markdown is null. It does this with a render fragment Skeleton. The content of Skeleton will be rendered when Markdown is null.

<RfMarkdown Markdown=null>
    <Skeleton>
        <div class="skeleton-lines">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </Skeleton>
</RfMarkdown>

How to Setup

Setting up RForge is simple. Follow the below steps to add RForge Blazor components to your project.

Install the Nuget package
Import the namespaces (optional)
Register RForge services
Include Bulma CSS

Install the Nuget Package

RForge Blazor components are installed via Nuget. There are two packages. One for the blazor app and one for the library if any.

Blazor Project Installation

Command Line

dotnet add package RForge.Blazor

Package Manager Console

Install-Package RForge.Blazor

Library Project Installation

This is optional but may be useful if you want to use common enums across the backend and frontend.

Command Line

dotnet add package RForge.Abstractions

Package Manager Console

Install-Package RForge.Abstractions

Import the namespaces

To simplify namespacing while using RForge, the package is designed with most all components sitting within the root RForge namespace.

You may want to include the following namespaces in your _import.razor for ease of use.

@using RForgeBlazor
@using RForgeBlazor.Services
@using RForge.Abstractions

Namespace	Purpose
`RForgeBlaozr`	Houses all of the blazor components.
`RForgeBlaozr.Services`	Houses interfaces you may need to communicate with certain components.
`RForgeBlaozr.Abstractions`	Common enums used through out the components.

Register RForge Services

In order for some components to work they must first have their services registered.

Open up Program.cs and add the following line before the var app = builder.Build();.

Heads Up!

If your project is using the multi project solution where one project is server and the other is client. You will need to register the services in both projects.


using RForgeBlazor;
//...
builder.Services.AddRfForgeBlazorServices();
//...
var app = builder.Build();

Include Bulma CSS

RForge makes use of Bulma CSS to stylize the components. Add / install Bulma and add the CSS file to the head. Link to download: Bulma releases.