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
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
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.