Up next in 10
Angular ngx-markdown Library to Render Markdown in Browser With Prism Syntax Highlighting Using TS
2 views
Jun 13, 2025
Get the full source code of the application here: Official Website: https://freemediatools.com
View Video Transcript
0:02
uh hello guys uh welcome to this live
0:04
stream so in this live stream I will
0:06
show you a angular module which allows
0:08
you to render markdown with live preview
0:12
so this is an angular library ngx
0:15
markdown the name of the package and
0:17
with the help of this you can actually
0:19
render markdown inside the browser with
0:21
live preview and syntax highlighting as
0:24
well we are using
0:25
prismjs library you can see this is your
0:28
markdown and side by side you are seeing
0:31
the live preview of it as well so this
0:34
is our highlight you can add as many
0:36
elements and as you write it you will
0:39
see the actual live preview on the right
0:41
hand side we can even have the source
0:43
code highlight as well this is the
0:46
source code we have unordered list
0:48
ordered list it is appearing as you can
0:50
see you can simply paste valid markdown
0:54
right here and simply on the right hand
0:55
side you will see the live preview so
0:57
this is actually the package here just
1:00
go to
1:01
npmjs.com just search for the package
1:04
ngx markdown so this is a simple angular
1:09
package which shows the live preview of
1:12
whatever markdown that you paste it
1:15
renders right directly in the browser
1:17
it's a very popular package the command
1:20
is very simple you simply install this
1:22
package it's almost having 28,000 weekly
1:26
downloads so I will show you a complete
1:29
example so the very first thing we need
1:31
to do we need to register this module so
1:35
this is a very basic angular project so
1:37
need to go to this
1:39
file which is
1:42
your app do.config.ts so this is we are
1:45
using the latest version of angular
1:47
which is 20 so inside this we have this
1:50
app.config.ts file so first of all you
1:52
need to import this line from this
1:55
module we have this function provide
1:58
markdown so you need to include this
2:00
from this package ngx markdown and then
2:03
inside the providers we are simply
2:05
passing it this function provide
2:07
markdown this is actually a function and
2:10
apart from that you also include the
2:13
syntax highlighting library of prismjs
2:16
which is a source code highlighting
2:18
library so we are simply including all
2:20
the necessary JavaScript and the CSS
2:24
things and after that you need to go to
2:27
this file app.component HTML file right
2:30
here and here you just need to
2:34
simply paste the code here for syntax
2:38
highlighting so we will have a simple
2:40
text area where we will render all our
2:44
markdown so we have the text area
2:47
element and here we'll be
2:49
binding a simple ngmodel
2:53
directive so we basically give this
2:56
ngmodel directive right
3:01
here and here you simply say the
3:04
markdown this needs to be a parameter in
3:07
the text area itself you need to write
3:10
like this
3:13
so so now we will have basically the
3:17
actual markdown component which will be
3:20
responsible for this so we simply say
3:22
this
3:23
markdown so here you simply declare it
3:27
by the markdown opening tag and the
3:30
closing tag and in between this it
3:32
takes
3:34
a whatever data attribute that you want
3:37
to highlight you simply say data and
3:41
uh and you pass actual markdown that you
3:44
want to render out so here we declared a
3:47
variable of
3:48
markdown so we basically need to declare
3:52
a simple class here which will
3:55
be
3:57
variable
3:59
binding so now you can see on the right
4:02
hand side by side whatever markdown that
4:05
you paste it is highlighting directly in
4:07
the browser you can see we have this
4:10
heading we have this source code
4:12
highlighting as well so similarly you
4:15
can have any sort of code highlighting
4:17
you simply write the name of the
4:25
language so as you can
4:29
see this is for Python language this is
4:32
here TypeScript we are using syntax
4:35
prism highlighting library in this to
4:38
highlight source code then we have this
4:40
ordered list unordered list so you
4:43
simply have this markdown component
4:45
right in the HTML you pass the data
4:47
which whichever markdown data that you
4:49
want to highlight in this attribute and
4:52
you have a simple text area we binded
4:54
this variable so all these variables we
4:56
have declared in the typescript here you
4:58
can see
5:00
app.component.typescript and inside this
5:02
file at the very top we are using the
5:04
forms module of angular which is builtin
5:07
and then we are including this uh
5:09
built-in package ngx markdown from this
5:12
we are including this uh method markdown
5:15
component and right here we are
5:18
declaring this markdown whatever
5:20
markdown that you want to highlight so
5:22
we simply declare it and now in the HTML
5:26
we are passing it inside this component
5:28
which is markdown so in this easy way
5:31
guys you can highlight markdown in the
5:33
browser using this angular package of
5:35
ngx markdown so simply install it and
5:39
start using it and also check out my
5:41
website guys
5:43
freemediattools.com which contains
5:45
unlimited tools regarding audio video
5:47
and image and I will be seeing you guys
5:50
in the next live stream
#Scripting Languages
#Software