Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on February 4, 2023

 

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

 

 

TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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

 

 

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

 

 

TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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.

 

 

 

Recent Posts

  • Angular 14/15 JWT Login & Registration Auth System in Node.js & Express Using MongoDB in Browser
  • Build a JWT Login & Registration Auth System in Node.js & Express Using MongoDB in Browser
  • React-Admin Example to Create CRUD REST API Using JSON-Server Library in Browser Using Javascript
  • Javascript Papaparse Example to Parse CSV Files and Export to JSON File and Download it as Attachment
  • Javascript Select2.js Example to Display Single & Multi-Select Dropdown & Fetch Remote Data Using Ajax in Dropdown
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme