Angular 14 ngx-markdown Library to Build Markdown Editor With Syntax Highlighter & Live Preview in Browser Using TypeScript

Welcome folks today in this blog post we will be using the ngx-markdown library to build markdown editor with live preview using typescript in browser. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new angular project using the below command as shown below

ng new sampleproject

cd sampleproject

And after that you need to install the below libraries using the below command as shown below

npm i ngx-markdown

npm i prismjs

npm i popper.js

And after that you will see the below directory structure of the angular app as shown below

First of all you need to go to app.module.ts file and copy paste the following code

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { MarkdownModule } from 'ngx-markdown';

import 'prismjs';
import 'prismjs/components/prism-typescript.min.js';
import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
import 'prismjs/plugins/line-highlight/prism-line-highlight.js';

import { AppComponent } from './app.component';

@NgModule({
  imports:      [
    BrowserModule,
    FormsModule,
    MarkdownModule.forRoot(),
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms';

import { MarkdownModule } from 'ngx-markdown';

import 'prismjs';

import 'prismjs/components/prism-typescript.min.js';

import 'prismjs/plugins/line-numbers/prism-line-numbers.js';

import 'prismjs/plugins/line-highlight/prism-line-highlight.js';

import { AppComponent } from './app.component';

@NgModule({

imports: [

BrowserModule,

FormsModule,

MarkdownModule.forRoot(),

declarations: [ AppComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

And now we need to go to app.component.html file and copy paste the following code

app.component.html

<textarea class="variable-textarea" [(ngModel)]="markdown"></textarea>
<markdown class="variable-binding" [data]="markdown"></markdown>

1 2	<textarea class="variable-textarea" [(ngModel)]="markdown"></textarea> <markdown class="variable-binding" [data]="markdown"></markdown>

As you can see in the above html code we have the textarea in which we have assinged the ngModel directive where we have the dynamic data. And then we have rendering the markdown directive in which we can write the markdown code and on the right hand side we have the live preview with syntax highlighter.

And now we need to go to app.component.ts file and copy paste the below code

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

  markdown = `## Markdown __rulez__!
---

### Syntax highlight
```typescript
const language = 'typescript';
```

### Lists
1. Ordered list
2. Another bullet point
   - Unordered list
   - Another unordered bullet

### Blockquote
> Blockquote to the max`;
}

import { Component } from '@angular/core';

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css'],

})

export class AppComponent {

markdown = `## Markdown __rulez__!

---

### Syntax highlight

```typescript

const language = 'typescript';

```

### Lists

1. Ordered list

2. Another bullet point

- Unordered list

- Another unordered bullet

### Blockquote

> Blockquote to the max`;

}

As you can see in the above typescript code we have the typescript code that we have initialized and it will be loaded when we load the page for the very first time.