Angular Markdown



Then, we start watching our project source directory and subdirectories for markdown files. When the ready event emits, we will return all the watched files. Then, we will proceed to convert all the files, and will keep track of the html files paths. Then, we schedule a target. Targets are set on the angular.json file. Angular-markdown-editor has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases. Markdown: see GitHub's Mastering Markdown; Angular coding style: see the Angular Style Guide; Google writing style: The Google Developer Documentation Style Guide is a comprehensive resource that this Angular documentation style guide builds upon. Kinds of Angular documentationlink. The categories of Angular documentation include. The Angular markdown editor component is shipped with several built-in themes such as material, bootstrap, fabric (Office 365), and high contrast. Users can customize any one of these built-in themes or create new themes to achieve their own desired look and feel either by simply overriding SASS variables or using our Theme Studio application.

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.

Library

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

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.

Angular Markdown

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.

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

The Bottom Line

Angular Markdown Viewer

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.