Markdown To Html Angular

Posted on by



Markdown-it demo. Fork me on GitHub. Frequently asked questions about MarkdownPad.

Angular is known for its facile infrastructure. Theoretically, every work is possible on this powerful yet flexible framework. In this tutorial, we will learn how to profoundly render Markdown as HTML in Angular 11 or even the more previously developed versions.

Apparently, this could be done through many other methods; however, i am going to lay down the foundation using the custom Angular Pipe.

We will also use the marked plugin, which allows us to convert [Markdown] into HTML. Markdown is an uncomplicated text format whose purpose is to be relentless to read and write, even when not converted to HTML.

Pipes are usually employed to transform data; they are in use since the inception of Angular 1 and known by the name of filters. But the wind took the turn since Angular 2, and they are called as Pipes.

So, without further ado, let’s start creating a custom Markdown Pipe in Angular 11.

Setting Up New Angular Application

Markdown

Creating a new angular application can’t be possible without having the Angular CLI installed on your system. So, shoot the command from the command prompt to install global Angular CLI.

Next up, run the command to create an angular application; however, you can skip this step if the app is already installed on your machine.

Navigate to the project root:

Install Marked Parser Package

Install the marked Markdown parser plugin through NPM. Its a low-level and powerful compiler for parsing Markdown without caching or blocking for long periods.

Create Pipe in Angular

Markdown To Html Angular Code

Head over to the command prompt using the Angular CLI to generate a new Pipe in your Angular application.

Now, as we can see, there are two pipe files that have been generated. So open the markdwon.pipe.ts file and add the following code inside.

Let me shed light on the above simple logic; the first marked package is imported on top. Then using the transform() method, we are parsing the HTML.

Import Markdown Pipe in AppModule

Subsequently, we have to import the MarkdownPipe pipe in app.module.ts file.

Finally, we can bring the markdown HTML pipe in action.

Insert the given below code in app.component.ts file.

Markdown To Html Angular Download

Pass the text or content value into the [innerHTML] directive with a markdown pipe name. Add the given below code in app.component.html file.

Run the Angular project and see the output.

Markdown To Html

The Bottom Line

Html Vs Markdown

Directive

Angular Markdown Editor

Eventually, we raised the curtain from the secrets of building the custom Markdown pipe in Angular application. One thing is for sure that we understood the concept of parsing the Markdown in HTML.