Rendering an Orchard Core Markdown Blog Post with Blazor WebAssemblyPost: Please check backGitHub:https://github.com/OrchardSki.

• Blazor Markdown Component
• Blazor Markupstring
• Blazor Markdown Editor Component
• Blazor Markdown Code Highlighting

1. This all completes the Radzen Blazor offering quite well. You can now scaffold a complete Blazor application from your existing database: CRUD page generation spares you the pain of creating similar screens. The built-in security powered by ASP.NET Identity provides the most common features - login, user and role management, permissions.
2. Blazor Markdown Editor is an intuitive and light-weight component that provides option for md to HTML conversion. It allows the content to be in the markdown format. The typed markdown syntax content can be previewed using a third-party plugin. The Blazor Rich Text Editor control can be used as a Blazor WYSIWYG Markdown Editor (md editor).
3. ASP.NET Core Blazor routing.; 12 minutes to read; g; A; p; s; R; In this article. In this article, learn how to manage request routing and how to use the NavLink component to create a navigation links in Blazor apps.
4. Extending Markdown In markdown, you use fenced code blocks to highlight code snippets. You triple back-ticks before and after code blocks. You can add optional language identifiers to enable syntax highlighting in your fenced code block. For example, C# code block would look like this.

I recently built a quick utility app for the day job, where I used a simple Markdown previewer with a Copy to Clipboard button. I use the button to notify if the copy is successful. Then, I return the button to its original state.

Blazor Markdown Component

Here’s how the app looks when it works correctly.

And here’s how it looks when the copy fails.

We’ll build a component that allows users to copy and paste text from a markdown previewer. This process involves three steps:

• Implement a ClipboardService
• Create a shared CopyToClipboardButton component
• Use the component with a markdown previewer

The code is out on GitHub if you’d like to play along.

Implement a ClipboardService

To write text to the clipboard, we’ll need to use a browser API. This work involves some quick JavaScript, whether from a pre-built component or some JavaScript interoperability. Luckily for us, we can create a basic ClipboardService that allows us to use IJsRuntime to call the Clipboard API, which is widely used in today’s browsers.

We’ll create a WriteTextAsync method that takes in the text to copy. Then, we’ll write the text to the API with a navigator.clipboard.writeText call. Here’s the code for Services/ClipboardService.cs:

Then, in Program.cs, reference the new service we created:

With that out of the way, let’s create the CopyToClipboardButton component.

Create a shared CopyToClipboardButton component

To create a shared component, create a CopyToClipboardButton component in your project’s shared directory.

Thanks to Gérald Barré for his excellent input on working with button state. Check out his site for great ASP.NET Core and Blazor content.

At the top of the file, let’s inject our ClipboardService. (We won’t need a @page directive since this will be a shared component and not a routable page.)

Now, we’ll need to understand how the button will look. For both the active and notification states, we need to have the following:

• Message to display
• Font Awesome icon to display
• Bootstrap button class

Blazor Markupstring

With that in mind, let’s define all those at the beginning of the component’s @code block. (This could be in a separate file, too, if you wish.)

With that, we need to include a Text property as a component parameter. The caller will provide this to us, so we know what to copy.

Through the joy of C# 9 records and target typing, we can create an immutable object to work with the initial state.

Now, in the markup, we can add a new button with the properties we defined.

You’ll get an error because your editor doesn’t know about the CopyToClipboard method. Let’s create it.

Blazor Markdown Editor Component

First, set up an originalData variable that holds the original state, so we have it when it changes.

Now, we’ll do the following in a try/catch block:

• Write the text to the clipboard
• Update buttonData to show it was a success/failure
• Call StateHasChanged
• Wait 1500 milliseconds
• Return buttonData to its original state

We need to explicitly call StateHasChanged to notify the component it needs to re-render because the state … has changed.

Blazor Markdown Code Highlighting

Here’s the full CopyToClipboard method (along with a TriggerButtonState private method for reusability).

For reference, here’s the entire CopyToClipboardButton component:

Great! You should now be able to see the button in action. If you need help triggering a failed state, you can go back to ClipboardService and spell the JS function wrong:

That’s great, but our component doesn’t do anything meaningful. To do that, we can attach it to a Markdown previewer.

Use the component with a markdown previewer

We can now build a simple markdown previewer with the Markdig library. This allows us to convert markdown to HTML to see the final state of our rendered Markdown state.

Thanks to Jon Hilton’s excellent post, I was able to do this in minutes. I’ll quickly add the component here—if you want greater explanation or context, please visit Jon’s post (another great site for Blazor content).

After you download the Markdig package and add a @using Markdig line to your _Imports.razor, create an Editor.razor component with something like this:

Long story short, I’m adding a text-area for writing Markdown, binding to the Body text. Then as a user types (the event='oninput), use Markdig to render HTML in the other pane on the right.

All we need to do now is include our new component, and pass the Body along. Add the following just below the @page directive and before the div:

As a reference, here’s the full Editor.razor file:

That’s really all there is to it!

Wrap up

In this post, we built a reusable component to copy text to the clipboard. As a bonus, the component toggles between active and notification states. We also saw how simple it was to attach it to a Markdown previewer.

There’s more we could do: for example, can we make the component more reusable by passing in button text and states—making it a ButtonToggleState component and not just used for copying to a clipboard? Give it a shot and let me know how it goes!