videocam_off
This livestream is currently offline
Check back later when the stream goes live
Up next in 10
Node.js markdown-it Tutorial to Parse & Render Markdown to HTML & PDF Using html pdf-node Library
Jan 9, 2025
Official Website:
https://freemediatools.com
Show More Show Less View Video Transcript
0:00
uh Hello friends welcome to this video
0:02
so in this video we will talk about that
0:04
how we can actually convert the markdown
0:07
files to PDF documents so first of all
0:10
we are actually using nodejs right here
0:12
you can see that and we are using two
0:14
packages first package will actually
0:17
convert your markdown file pass it
0:19
convert to HTML and then the second
0:21
package will actually convert that HTML
0:23
to PDF document so we are actually using
0:25
markdown-it which is actually a very
0:28
famous markdown parser and then secondly
0:32
we are using HTML dpdf D node which is
0:35
actually takes the HTML and converts
0:37
them into PDF this is actually the
0:39
example and if I just show you how to
0:42
run this we have the sample. markdown
0:45
file right here you can see this is a
0:47
very basic markdown file that is
0:49
available and if I try to run this
0:53
index. 2. JS file here if I run this
0:57
file you will see on the left hand side
0:59
first of all it will actually pass the
1:01
mark down and convert this to HTML and
1:04
then we will convert the HTML to PDF so
1:06
if you
1:08
see it is compiling this template to
1:10
handlebars so a result. PDF file is
1:13
created if you see now all this markdown
1:17
file that you saw sample. markdown file
1:20
is successfully converted to PDF file
1:22
you will see that so this is actually
1:24
the PDF file I can open it in the
1:25
browser as well so you can see we will
1:28
look at it in this video how we can do
1:30
that step by step so these are two
1:32
packages that we are using right here
1:34
the first package is markdown-it if you
1:38
just search it the very first package
1:41
which comes right here this is a modern
1:43
pluggable markdown parser almost 6
1:46
million weekly downloads are there so
1:48
it's a very famous package which allows
1:51
you to work with markdown files converts
1:53
them into HTML mark down to HTML and
1:56
then we have the second Library which is
1:58
HTML dpd Dash node so this actually
2:02
converts any HTML content that you have
2:04
to PDF documents so almost 29,000 weekly
2:07
downloads are there so it's a very handy
2:09
package which actually takes any HTML
2:12
that you want to convert to PDF document
2:14
so we will look at both these things so
2:18
now let's let's get started so the very
2:20
first thing I will do I will require
2:23
this package markdown it and will
2:26
require this markdown it package and
2:28
then we will also require this package
2:30
which will actually convert the HTML to
2:33
PDF so HTML PDF Das node and then we
2:37
also need to require the file system-
2:40
extra package as well and then we will
2:43
simply write a function guys which will
2:45
actually first of all convert the
2:47
markdown to HTML this will be a async
2:50
function and we will be expecting the
2:52
markdown path to be passed as an
2:53
argument this will be a async function
2:56
Arrow function so convert markdown to
2:58
HTML we are expecting the markdown file
3:01
to be passed as an argument so right
3:03
here we will be writing our main
3:05
function which will be again be Asing
3:09
function so right here guys we'll be
3:11
giving the markdown path so this will be
3:14
sample do markdown because it is present
3:16
in the same directory if you see it is
3:19
present in the same directory so we are
3:20
giving the path and then we also need to
3:23
give it the path of the output file so
3:25
output.pdf will be created in the same
3:27
directory and now we need to Simply say
3:30
convert this markdown file to HTML so
3:33
for doing this we need to
3:35
Simply await and we will be calling a
3:39
very simple function that we will make
3:40
convert markdown to HTML we will be
3:43
passing this markdown path as an
3:45
argument so we are actually calling this
3:47
above function right here and passing
3:49
this markdown file as an argument so
3:52
this function which actually converts
3:54
your markdown to HTML very simple we
3:57
basically first of all read it
4:00
with the file system module you will
4:02
read this markdown file pass the path
4:04
and the second argument will be the
4:06
encoding type which will be
4:09
utf8 encoding type and after that we
4:12
will instantiate this markdown it
4:16
package that we
4:18
included you can see at the top we
4:20
included this it's a parser we are
4:22
instantiating a new instance of it and
4:24
then this object that we have CAU
4:27
contains a method called as render we
4:30
will actually use this method to
4:31
actually pass this markdown that is
4:34
present inside this file and we will
4:37
pass the markdown that we got by reading
4:40
it so now we will actually get this HTML
4:43
content now we just need to make this
4:45
HTML document so backtick symbol so that
4:48
we can write multiple lines of HTML code
4:50
so right here we will write this basic
4:53
HTML tag
5:02
we will give it markdown to HTML so
5:05
inside the body tag we will
5:14
be
5:16
HTML
5:17
content like this so now we can simply
5:21
return this HTML from this function
5:23
that's all that it is doing it is
5:25
actually passing this markdown file that
5:27
we got and converting it to HTML and
5:30
returning it from this function that's
5:32
all so if I console
5:35
logit HTML content and simply call the
5:39
main function right here so first of all
5:41
the main function will be called and
5:43
then it will call this function and it
5:44
will return this HTML from here and
5:46
you're console logging it and try to run
5:49
this index2 do JS you'll see it will
5:53
actually print out this uh HTML you can
5:56
see this is actually this HTML that we
5:58
got we converted P this markdown that we
6:02
got and we actually converted this this
6:04
to HTML so now the next task is to
6:07
actually convert this to a PDF document
6:09
this is really easy after we get this
6:12
HTML content the second function we will
6:15
be creating is uh create the PDF from
6:19
HTML so here we will pass this HTML
6:22
content as the first
6:23
argument and the second argument is the
6:26
PDF path so we are passing two arguments
6:29
here PDF path and this HTML content so
6:32
now we just need to make this function
6:34
which is
6:36
uh create PDF from HTML it's the Asing
6:40
function HTML content and uh PDF
6:46
path so here you can see that we are
6:48
creating the PDF from HTML and we are
6:51
passing these two arguments so right
6:56
here we will have the options
7:00
the format will be
7:07
A4 and then the content here will be
7:10
HTML
7:12
content and then we will simply say
7:16
await so after we get this file whatever
7:19
content that we we set the options
7:22
format to B4 so then we have this
7:25
function pdf. generate PDF
7:29
so this actually is a method right here
7:32
generate PDF right here if you see we
7:34
are requiring it this PDF package and it
7:38
contains a method called as generate PDF
7:41
you will pass this uh file alongside
7:44
with the options so then it will return
7:46
this promise you can handle this and
7:48
this is actually the buffer which is
7:50
returning now we can Simply Save the PDF
7:53
document by using file system module
7:55
passing at the location that we want to
7:57
save and the buffer the content that's
8:01
all that we need to do right here and if
8:02
you see if I run this application
8:07
now let me change the file name to
8:12
be
8:13
print.pdf so what you will see if I run
8:17
this on the left hand side print. PDF
8:20
will be
8:22
created so you will see that this
8:24
markdown file is successfully converted
8:26
to PDF document
8:29
so in this way you can actually do this
8:31
process step by step I showed you and
8:34
please hit that like button subscribe
8:36
the channel as well and I will be seeing
8:38
you guys in the next tutorial