videocam_off
This livestream is currently offline
Check back later when the stream goes live
Up next in 10
Javascript Markdown to HTML & PDF Parser & Converter in Browser Using PDFMake & Showdown Library
Jan 9, 2025
Get the full source code of application here:
https://gist.github.com/gauti123456/cb1c8316b3b550533a047113c43a9b0e
Show More Show Less View Video Transcript
0:00
uh Hello friends welcome to this video
0:02
so in this video we'll be looking at
0:04
another markdown
0:06
parcel and we'll be looking at how to
0:09
convert markdown into first of all HTML
0:11
and then we will converting into the PDF
0:14
document using PDF make Library which is
0:17
a open source PDF generation library in
0:19
JavaScript so you can see on your screen
0:22
this is actually the application here
0:24
the user can paste the
0:26
markdown can see we have pasted the
0:28
markdown in the test are here then we
0:31
have a button out there you can convert
0:33
to PDF so when I click this button our
0:35
markdown is first of all pass and
0:38
converted to HTML and then it is
0:40
converted to the HTML is converted to
0:43
PDF you can see the markdown is
0:47
successfully converted to PDF so the
0:52
markdown parsel that I'm talking about
0:54
is
0:56
Showdown if you just type Showdown Js
1:00
it's a by Direction markdown
1:04
parcel and it's used to convert the
1:08
markdown into
1:10
HTML and this is their GitHub repo and
1:14
we'll be using this
1:16
Library directly using a CDN you can see
1:20
we will be using the CDN to actually use
1:22
this library right in in the browser and
1:25
for generating the PDF we will be using
1:28
this Library which is PDF make which is
1:30
a very simple Library client side PDF
1:33
generation library in JavaScript you can
1:36
even use it in the server side as well
1:38
but we will be using it in a
1:40
CDN and also we will be using this
1:43
Library which is HTML 2 PDF make this is
1:48
essentially a plug-in which is used to
1:50
convert the HTML directly into the PDF
1:54
so you'll be using this also 63,000
1:56
weekly downloads so now let's get
1:58
started all the source code that I will
2:00
use in this video is given in the
2:02
description so first of all what I have
2:04
done I successfully copy pasted all the
2:07
CDM which is uh required for this
2:10
application Showdown is a markdown
2:13
parsel PDF make is a PDF generation we
2:16
have copy pasted all the CDN right here
2:19
so you will find in the source code when
2:22
you get
2:24
this and now to actually make the
2:27
interface it's really simple we we'll
2:30
use the container class of bootstrap
2:32
inside this you will have an heading
2:35
marked down to PDF
2:38
app and then we'll be using the form
2:41
group class of bootstrap and here will
2:43
be having a
2:44
label where will allowing the user to
2:47
actually enter the
2:49
markdown so here we'll be telling the
2:52
user to enter the markdown so then we'll
2:55
be having a text area where you'll be
2:58
allowing the user to Simply simply enter
3:00
the markdown we're giving an ID to it so
3:03
that we can Target in
3:06
JavaScript so we'll be also be giving a
3:09
class here of bootstrap which is form
3:14
control and
3:15
rows I will make it as
3:19
10 so if you open this now it will look
3:22
something like this we will have this
3:24
text area and we also need a button so
3:29
it will simply say that convert to
3:33
PDF so you will have a bootstrap class
3:38
of BTN
3:40
BTN primary and uh we'll give it an ID
3:43
here to this or button so right here in
3:46
the JavaScript we will first of all
3:49
target the button we have given the ID
3:52
here if you see we have given this ID
3:54
button so you'll find a on click
3:57
listener so when we click this button
3:59
this call back function will
4:04
execute so right here we need to get the
4:07
markdown which is entered by the
4:14
user so we have given the ID to the
4:17
markdown text area field you will see
4:19
markdown input so we will Target this
4:22
simply markdown
4:24
input and we will basically get the
4:26
value which which the user has entered
4:29
by us using dot value so this will give
4:31
the value to us now you will be
4:34
initializing the markdown parsel Library
4:37
which is Showdown
5:01
so let me just uh see I think
5:09
I okay let me just write this so that I
5:13
can show you line by line what is
5:18
happening so first of all we need to
5:20
initialize the uh parsal
5:23
library inside this after we C the mark
5:27
down so what we need to do
5:31
we need to initialize this uh markdown
5:35
parser
5:37
Library
5:39
so this is a showdown that I already
5:43
told you Showdown and it contains a
5:45
function which is converter so what this
5:48
function will do it will take the mark
5:51
down and convert that into HTML so this
5:55
converter object contains a function
5:57
which is uh make HTML
6:00
and here you need to provide your
6:02
markdown so markdown input you will
6:04
provide this as
6:07
argument so now you can simply console
6:11
log and check if the markdown has been
6:14
converted to HTML or not so here we are
6:17
initializing The
6:21
Showdown markdown paral library and it
6:24
contains a function here which is make
6:27
HTML so if you try to
6:33
paste sample markdown suppose I have
6:36
already this markdown file so I will
6:39
simply paste this in the text area click
6:42
on convert to PDF and if you check the
6:45
console you will actually see your
6:47
markdown has been converted to HTML so
6:50
it is giving us the HTML right here so
6:52
now the job is very simple we need to
6:55
convert this HTML which we are getting
6:58
into PDF document so for that we will be
7:01
using that
7:03
uh HTML 2 PDF
7:08
make Library which will insert this HTML
7:12
in the PDF it will return this PDF for
7:15
us and now we can
7:18
simply download or generate the PDF
7:22
document by simply making a doc
7:26
definition and here inside that we will
7:29
be initializing the content to the PDF
7:32
content and then we need to download the
7:35
PDF document so in PDF make there is a
7:38
function out there which is create
7:41
PDF and here we pass the doc definition
7:44
and it contains a function open so it
7:47
will open the PDF document
7:49
automatically so if you now open this
7:53
paste your
7:54
markdown and click on this button and
7:56
now you will see your markdown that you
7:58
have entered first of all it converts to
8:02
HTML using that markdown parcel library
8:05
then it converts to PDF using the PDF
8:08
make library and you can just see your
8:11
everything has been smoothly converted
8:14
and you are seeing your PDF document so
8:17
if you need the full source code the
8:18
link uh is given you can get the source
8:21
code in the description of this video
8:24
thank you very much for watching this
8:27
and also do check out my fre media tools
8:30
website which contains a lot of
8:32
thousands of free tools related to video
8:35
image and text check out this website as
8:39
well please hit that like button
8:40
subscribe Channel and I will be seeing
8:43
you in the next
#Internet Software
#Scripting Languages