Blazor How To: A Client Control for Viewing Markdown Content
blazor blazorhowto wasm aspnetcore dnetcore csharp
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.
| Topic | Subtopic | |
| This Category Links | ||
| Category: | Blazor Index: | Blazor |
| Next: > | Blazor How To | A Client Control for Viewing Images |
| < Prev: | Blazor How To | A Client Text View Control including Copy and Downloads functions |
