The Markdown display mechanism is encapsulated in a custom Blazor Client Component, ReadMe. This post covers the code to request a Markdown file from the server and to render the response.

Summary

Control Name: ReadMe
Purpose: Get Markdown text from server, convert it to Html using Markdown syntax and render it
Code ReadMe.razor In djaus2/GetSampleApps on GitHub
Example of Usage <ReadMe FolderId=@FolderId MarkdownFilename=@ReadmeName />
Explanation of Example: Get the file as named in the folder on the server as identified by previous scanning of samples into a list of folders, and render that.
Further:
 
This Component embeds a further custom Component: MarkdownModel.
<MarkdownModel Content=@MarkDownInfo />
This converts the text to Html and displays that.
Code MarkdownModel.razor @HtmlContent
Code Behind MarkdownModel.cs In djaus2/GetSampleApps on GitHub
Nuget Packages
 
MarkDig: For MarkdownModel Component:
Install-Package Markdig -Version 0.21.1
References: MarkDig: lunet-io/Markdig on GitHub
Microsoft Docs:  

About MarkDig

This handles the conversion of Markdown text to Html and requires the installation of the Markdig Nuget Package.

Sample Folders on Server

As covered previously, there is a list of folders, each with an Id. See the previous post on this. So to get Markdown content as text, the control does a call to the Server using the filename and folder Id.

Client Control Http Get Submission

As covered previously here this is a parameterized Http Get to the server. The command format is

    Markdown~<Filename>~<FolderId>

Note that it is a tilde separated list.
For example,

    string path ="Markdown~ReadMe.md~10";

Making the Http Request:

This is done by the ReadMe Component.

    var strn = await client.GetAsync(ServiceEndpoint + $"/{path}");
    markdownInfo = await strn.Content.ReadAsStringAsync();

Note that the Markdown data is returned as a “normal” string and then processed into Html markup.

Server Response

See the Blazor Server Response here

Display of Returned Markdown text

The “inner” Control MarkdownModel just renders processed text, bound to HtmlContent which is generated via a call to the Markdig library.

@HtmlContent

The “outer” control, ReadMe makes the Http Get request to the server and submits that to the inner control as a parameter. The code for this parameter, Content, as a property is:

    [Parameter]
    public string Content
    {
        get => _content;
        set
        {
            _content = value;
            HtmlContent = ConvertStringToMarkupString(_content);
        }
    }

So the ReadMe control gets the raw text from the server and then sends that text to the Content property of the MarkdownModel control. This converts it to Html and sets that to HtmlContent for rendering.
The conversion is done by the call to ConvertStringToMarkupString(). This makes a call to the Markdig library usingMarkdig.Markdown.ToHtml(). That code can be view on GitHub. See the MarkdownModel Control Code link as in the Summary above.

Comment

A 2Do: Merge the two components.


 TopicSubtopic
  Next: > Blazor How To
<  Prev:   Blazor How To
This Category:Blazor
  Next: > Blazor How To A Client Control for Viewing Images 
<  Prev:   Blazor How To