Blazor Markdown

I’m thrilled to announce that Blazor WebAssembly is now officially released. This is a fully-featured and supported release of Blazor WebAssembly that is ready for production use. 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.

1. Blazor Markdown Blog
2. Blazor Render Markdown

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.

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 Markdown Blog

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.

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:

Blazor Render Markdown

• 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.

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

For reference, here’s the entire CopyToClipboardButton component: Html ide for mac os.

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!

Bootstrap UI components for Blazor and Razor Components

Dependencies

• net5.0

  • BootstrapBlazor(>= 5.0.27)

Used By

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version History