1. Blazor Markdown Editor Component
2. Blazor Markdown Code Highlighting
3. How To Render Markdown
4. Blazer Markdown Game
5. Blazer Markdown 2020
6. Blazer Markdown Table

🔥 Get up to 95% discount on the Blazor WebAssembly Full Stack Bootcamp: ☕. #r 'nuget: BootstrapBlazor.Markdown, 5.0.17' #r directive can be used in F# Interactive, C# scripting and.NET Interactive. Copy this into the interactive tool or source code of the script to reference the package.

Blazor + Markdown = BlazeDown!

This is an experiment built on top of an experiment to kick the tires of Blazor.

The initial version of BlazeDown was written using Blazor 0.2. Much has changed in just a few months time and as a result BlazeDown has seen some updates to. This article was updated to reflect how BlazeDown was built using 0.5.1. The previous version is available here

This is a proof of concept using Blazor to create an online Markdown editor.

This experiment is in no way intended to be a product, or example of best practices. It’s here because it it’s possible and that’s all.

Client Side C#

BlazeDown was built using Blazor, a client side experimental framework for building native web applications using .NET and C#. That’s right, this app was created with .NET and is running natively in the browser using WebAssembly.

Thanks to Blazor the app requires no plugins, this is because the code is compiled to WebAssembly, something your browser understands. Nearly everything you see here was written in .NET using C# with a few exceptions. Since Blazor is in the experimental phase (I can’t stress that enough), some small workarounds are required for certain features.

Building BlazeDown

This experiment was to test out Blazor and see how easy (or difficult) it was to use a .NET Standard library on the client. The beauty of BlazeDown is that writing a Markdown parser was completely unnecessary because one already existed for .NET.

The Markdown Processor

BlazeDown takes advantage of the .NET ecosystem. It uses the MarkDig an extensible Markdown processor for .NET. Since MarkDig is compatible with .NET Standard 1.1+ it worked flawlessly with Blazor. Having the freedom to reuse existing .NET libraries on the client is in my opinion what makes Blazor an interesting option for developers.

Utilizing MarkDig in Blazor followed the standard procedure of grabbing the package from NuGet. Once the package was installed, MarkDig is initialize just as it would be in any other .NET application.

Simply calling MarkDig’s ToHtml method converts a string into HTML.

Loading External Content

To complete the experiment Blazor was used to load Markdown .md files externally. Once again .NET was leveraged to add the feature without directly jumping into JavaScript by using System.Net.Http and Http.GetAsync.

The code for using Http.GetAsync is quite similar to how it would be used in a typical .NET application. An HttpResponseMessage is created to make the call to the resource using GetAsync. Once the response returns, we check to see if the response was successful using httpResponse.IsSuccessStatusCode. Finally, the resulting markdown file is returned, or a error message is passed along await httpResponse.Content.ReadAsStringAsync() : httpResponse.ReasonPhrase.

Blazor Markdown Editor Component

While these are all quite familiar routines, it’s worth noting that some abstractions may be present in Blazor to invoke JavaScript under the hood to make the actual Http request.

The Component

To fully experience what Blazor has to offer in its current state, the Blazor component model was used to create a <Markdown> component. The component is capable of receiving a simple string (markdown) and coverting it to HTML.

The Content property is used to set a simple string as the Markdown to render as HTML.

<Markdown>

output

<h1>Hello World</h1>

Blazor Markdown Code Highlighting

Blazor’s component model follows similar principals to modern JavaScript frameworks like Angular. Each component has a HTML template, in the case of Blazor we use Razor’s .cshtml format. In addtion to the template, the components code is encapsulated with the component as C#.

The Markdown component’s structure is pretty straight forward. The properties and methods of the component are bound and rendered using Razor. By making Content and FromUrl public properties, these values are recognized as component properties when we write <Markdown PropertyName. Oxygen element.

The code above represents the ideal code for the component.

Update: Blazor 0.5.1 release

Before Blazor 0.5.1, there was no method for rendering raw HTML and BlazeDown was forced to use unconventional hacks to implement the feature. With the release of 0.5.1 the type MarkupString was added to facilitate rendering HTML directly using Blazor. WARNING: Rendering raw HTML constructed from any untrusted source is a major security risk!

How To Render Markdown

Rendering the HTML parsed from MarkDig to the component’s view is a simple as casting the HTML results from BuildHtmlFromMarkdown to a MarkupString.

Data Binding in Blazor

The BlazeDown app uses data binding to update the HTML preview when a user enters content in a <textarea> on the page. By binding <textarea> and <Markdown> components together, the online-markdown-editor experience is completed. To ensure the data is always updated when the textarea’s value is changed two-way data binding is used. Using the bind attribute on the <textarea> the data ContentValue is bound to the value of the <textarea>, in addition it is automatically updated when the textarea’s onchange event is raised.

Conclusion

Blazor is quite an amazing idea and worthy experiment. It’s exciting to see how easy it was to create an experiment like BlazeDown. Using mostly C# and existing .NET libraries, a client-side Markdown editor was created with minimal effort.

It’s exciting to see Blazor being built. The community is experimenting right along side the dev team providing feedback, issues and pull request on the Blazor GitHub repo.

Blazor promises to empower C# developers to build modern web applications quickly, using a language and ecosystem they already know and understand.

So let’s see how this stacks up with a real-world requirement; building a simple markdown editor.

It’s hard to imagine a world without Markdown these days.

For everything from blog posts, to github issues and self published ebooks, Markdown has cemented its position has a convenient way to edit plain text, whilst maintaining some control over the ultimate format and appearance of your work.

Today’s Blazor example centres on building a markdown text editor.

The requirement is to provide a text box which accepts markdown and generates a live preview of the resulting HTML.

Here’s how I’d approach building something like this in Blazor:

• Create the basic HTML structure (rows, columns etc)
• Add the essential HTML elements (textarea in this case)
• Add bindings to make the textarea value sync with a field/property in the component
• Implement code to convert the markdown to HTML
• Render the HTML on screen

One last step..

Check your inbox and click on the link in the email to complete the signup process and start receiving the emails!

Let’s start with some basic HTML structure….

Editor.razor

I’m sticking to Bootstrap here because my CSS kinda sucks…

Blazer Markdown Game

This gives us a simple two column layout for our page; now to add a textarea

Run this and you’ll see a text area, nothing very interesting going on yet…

Now we’re ready to take the next step; we need to take whatever is entered into the textarea and store it in our component’s state.

For this, we can use properties and Blazor’s binding syntax. We just need to declare a couple of attributes:

These attributes tell Blazor to bind the value of textarea to a property called Body and to update Body whenever the value of our textarea changes.

The result? Body will always reflects the contents of the textarea. Whenever the value of textarea changes, Body will be instantly updated with the new value.

Now you might have noticed we haven’t created a Body property anywhere yet.

Whilst it is possible to write all your Blazor UI logic in @code blocks in the razor files themselves, I generally prefer to put that code into a separate class.

Let’s create a component base class for our component and declare the Body property in there:

Editor.razor.cs

Now we just need to update our component markup to inherit this component base class and, whilst we’re here, add a binding to render the current value of Body.

This way we can check that ‘Body’ definitely does update as we change the contents of the textarea. How to download roblox on mac app store.

Run this, type something into the textarea and you’ll see an instant preview of what you typed.

But, hold the phone, I promised an all-singing and dancing HTML preview…

As it stands, if you throw markdown at this textarea you’re just going to see that markdown in the preview, exactly as you typed it…

Happily, we don’t need to expend much effort to get HTML from this markup, we can employ the excellent Markdig .NET Markdown processor to do it for us.

Bring in the NuGet package…

Markdig will take any text and process the Markdown for us, spitting HTML out the other end.

Let’s add a new Preview property to our component which will invoke Markdig every time we request its value.

I’ve also updated Body so it will always have an initial empty string value (rather than being null which would trip Markdig up).

Now we can update our component markup to render this preview instead of Body

Run this now and tada…

I mean, it’s HTML, but not the glorious preview we were hoping for.

Ideally we’d want to actually render the HTML and get a sense of how our content is shaping up; seeing the raw HTML itself isn’t much use.

Luckily Blazor has one more trick up its sleeve; rendering raw markup.

By default Blazor won’t just push this markup out for your browser to render; after all, if you blindly accept code you don’t own and run it in the browser, any number of bad things could happen!

But if you’re happy with the risks, you can force Blazor to spit this code out raw and let the Browser do as it pleases.

Now we’re talking.

Type markdown in on the left, get HTML rendered on the right.

Sometimes as a developer you come up against a requirement which you expect to be complex (and take ages) to build, and every now and again it turns out to be easier than you thought.

In this case, building a simple markdown editor using Blazor turned out to be pretty straightforward.

Markdig does all the heavy lifting and a tiny amount of Blazor binding syntax handles the rest.

Check out the complete source code for this example here.

One last step..

Check your inbox and click on the link in the email to complete the signup process and start receiving the emails!

Next up

Blazer Markdown 2020

Blazer Markdown Table