Up next in 10
Build a React.js Markdown File to PDF Editor & Converter in Browser Using Highlight.js in Javascript
Dec 13, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-react-js-markdown-file-to-pdf-editor-converter-in-browser-using-highlight-js-in-javascript/
Show More Show Less View Video Transcript
0:03
Uh hello guys, welcome to this uh live
0:06
stream. So in this live stream I will
0:08
basically talk about a project that I
0:11
developed inside ReactJS which which
0:14
essentially converts your markdown files
0:19
into PDF documents.
0:21
with live preview in the browser. So you
0:25
can see that I'm running this
0:26
application on localhost 30001 port
0:30
number. If I just refresh here, you will
0:34
automatically see on the left hand side
0:37
you will be able to write sample
0:40
markdown. So this is essentially a
0:43
markdown file which is a very popular
0:45
format among developers and programmers
0:48
or any people common people they
0:51
basically write this. This is actual
0:53
format of markdown and on the right hand
0:55
side you will actually see the live
0:57
preview of whatever markdown that you
1:00
will write. So I can make any sort of
1:02
changes right here and basically it will
1:05
reflect whatever you will write right
1:07
here. So I can basically change this,
1:09
edit this. You can basically write your
1:12
own markdown if you have knowledge in
1:14
writing markdown files. It's a complete
1:16
editor
1:18
fully built inside ReactJS in it works
1:22
in the browser. It doesn't require
1:24
serverside code and the nice
1:26
functionality of that after you written
1:28
your markdown you can simply export this
1:31
to a PDF document. So if you want to
1:33
save this as a you will simply click
1:36
this button which is export. So as you
1:38
click this button of export guys what it
1:41
will do it will actually export or save
1:44
this file as a PDF file. Simply select
1:47
here save as PDF and click on save. It
1:51
will ask for the location. Just select
1:53
the location. Click on save. So your
1:56
file has been saved. If I show you this
1:59
is all the markdown has been
2:01
successfully converted to a simple PDF
2:05
document. So it automatically split into
2:08
two pages because it was uh the markdown
2:11
file was larger. So it basically split
2:15
the code all the markdown that you have
2:18
written into PDF into two pages. This is
2:21
the first page. This is the second page.
2:23
So it's a fullyfledged clientside uh
2:26
markdown to PDF converter where you can
2:29
actually write your markdown files with
2:31
live preview. It's a complete editor.
2:34
You will actually see the output as of
2:37
now just as you write basically on the
2:40
right hand side you will actually it's a
2:43
fully fleshed editor and you will see
2:45
the light preview as you are basically
2:47
writing your any markdown.
2:52
You can see that. So if you have
2:54
knowledge about markdown files, if you
2:56
work with daily with these markdown
2:59
files,
3:00
then it's very much beneficial
3:02
application. The link is given guys of
3:04
this project which is entirely built in
3:06
ReactJS and uh
3:09
uh you can directly purchase the full
3:11
source code the entire project. The link
3:14
is given in the description. You can
3:16
purchase it from my website. After you
3:18
purchase guide, you will actually get a
3:20
zip file and which will actually contain
3:23
this directory structure. So you
3:26
basically get this zip file and this
3:29
source code will be there which is
3:31
actual components the header component
3:33
markdown component. This is the complete
3:36
editor with live preview. So all this
3:38
JavaScript code it's built entirely in
3:41
ReactJS in the package jaw JSON file.
3:45
You will see it's a ReactJS project and
3:48
uh we are using highlight.js and code
3:52
mirror. So highlight js if you don't
3:55
know it's a syntax highlighting because
3:57
if you see basically as we are writing
3:59
our markdown
4:02
uh links are highlighted in different
4:04
colors and basically code is also
4:07
highlighted in different colors. So all
4:10
these things all these coloring schemes
4:12
are coming because of highlight.js JS
4:14
which is essentially a library. So
4:17
basically if you are writing this code
4:18
right here it is if you you can
4:21
basically search for this package
4:23
highlight.j it's a it's a library for
4:27
syntax highlighting if you want to do it
4:29
in our projects. It's a open-source
4:33
library that we are using guys and it's
4:35
very much helpful to actually
4:38
do this syntax highlighting inside your
4:40
application. So we are doing it and the
4:43
second library we are using it's a code
4:45
mirror. Code mirror basically it's a
4:48
code editor component for the web
4:50
application. So if you want to implement
4:52
your code editor inside any web
4:54
application that you are developing. So
4:56
inside specifically this application we
4:58
are developing markdown to PDF editor.
5:01
For this we need to have this uh editor.
5:04
So for that editor we are using this
5:05
code mirror
5:07
uh this component library inside our
5:11
react chase project. So the we are using
5:13
these two opensource libraries to
5:15
actually make this awesome converted
5:17
right in the browser itself which
5:19
actually converts your markdown files
5:21
into PDF file. You can even select a
5:24
file as well if you have a markdown file
5:27
available to you. So I have this sample
5:30
markdown file. I can select this file
5:32
and basically all these things it will
5:35
be listed out. You will see that.
5:39
So on the right hand side you will see
5:41
that with images if you have a existing
5:45
markdown file then also you can convert
5:47
that file into the live preview it will
5:51
show you. And now you can simply save
5:52
this file as a PDF file. So simply
5:54
convert this and click on the save
5:56
button. So now all your content of
5:59
markdown file will be converted to a PDF
6:02
file.
6:03
If I show you, you can see all this
6:06
thing is converted. It created
6:09
automatically the pages. It calculated
6:11
depending upon the length of the text,
6:13
it calculated the total number of pages
6:15
required for the PDF document. And you
6:17
can see all the images that are shown in
6:21
the markdown file. You can see the
6:23
syntax highlighting is automatically
6:25
done guys in this application. the
6:27
tables, the quote, the syntax
6:29
highlighting.
6:30
These are the quotes, samples, the
6:32
headings, the bullet points, uh
6:35
numbering, line numbering.
6:38
All this is done automatically guys, it
6:40
converted. So exactly
6:43
uh you can see 12 pages are there in
6:46
this PDF document. It is converted. So
6:48
basically we submitted this markdown
6:50
file and we see this light review. You
6:53
can even edit this file. Basically, you
6:55
can change it like this.
6:58
It's a complete editor, guys. Ultimate
7:00
editor where you can actually modify the
7:03
file of markdown. Basically, make some
7:06
changes and then convert it to PDF
7:08
documents. It's a nice little project.
7:10
The link is given in the description.
7:12
You can check out and purchase the full
7:14
source code. You will actually get this
7:15
full source code and you can actually
7:18
deploy this as a real. You can see we
7:20
are running it in local host 30001. So
7:23
once you basically extract the content
7:25
in the zip file after you make the
7:27
payment you will get the zip file from
7:29
Google drive you just need to uh
7:34
uh in order to start this application
7:36
just type npmi. So this will actually
7:39
install all the node NodeJS modules and
7:42
it will create a NodeJS modules folder
7:45
for your ReactJS application. So just
7:47
you need to invoke this command before
7:50
you start your application. So now to
7:53
start this application at port number
7:55
30001, you will actually run this
7:58
command which is npm run start. So I
8:01
have already installed it. So it will
8:03
take some time to install all the
8:04
modules and then run this command which
8:06
is npm run start. But this will actually
8:09
start your reacts application
8:12
which is markdown editor to pdf right in
8:16
the browser itself which will run on
8:18
localhost 30001.
8:22
Similarly, we if you want to deploy this
8:25
to a real domain name, then also you can
8:28
basically build out your project. The
8:30
build command is npm run build. This
8:32
will basically minify the code. It will
8:35
give you static HTML, CSS, JavaScript
8:37
code that you can deploy to a real
8:39
domain name. So, this makes it easy for
8:42
you to actually do this. So
8:46
this will automatically start your
8:48
application on localhost 3000 port
8:50
number. Whenever you do this it is
8:53
starting the development server. It will
8:55
take some time for the application to
8:57
start. So you just need to follow those
8:59
steps guys and your application will
9:02
start.
9:04
We are actually using these two packages
9:06
code mirror and the highlight.js. So
9:08
these two libraries we are using guys.
9:11
Highlight js it's used for syntax
9:13
highlighting. So inside your markdown
9:15
files you need to highlight something.
9:18
So this application will start. So it's
9:21
a code editor that we have inside your
9:23
application. So here you can enter valid
9:26
markdown file. So if you know about the
9:29
syntax of markdown you will definitely
9:31
know
9:32
you can see that. So you can enter valid
9:36
markdown. Markdown files are typically
9:38
used in blogging. If you want to design
9:41
a custom blog, markdown files are used
9:43
in static websites and it is also used
9:46
in uh designing rumé and it's very
9:49
relevant in programming business. If you
9:52
are a tech guy, you will definitely know
9:53
about markdown files and if you're
9:55
specifically looking for a markdown
9:57
editor and if you want to convert your
9:59
markdown files into PDF documents and
10:01
it's a complete solution guys, it works
10:03
in the browser client side fully client
10:05
side. No serverside code is involved. It
10:08
entirely coded inside ReactJS. You can
10:10
save your markdown files into PDF files.
10:13
It's a complete solution and it makes
10:16
the job way more easier. You can see all
10:18
your markdown content is converted into
10:21
PDF document with syntax highlighting
10:23
with all the CSS properties preserved.
10:26
You can see the quality of the document.
10:29
It looks tremendous.
10:31
And the main advantage is that it works
10:33
in the browser. No third party. You
10:35
really don't don't want to waste your
10:37
time in going to third party websites to
10:39
actually carry out the conversion of
10:41
markdown to PDF. It works in the browser
10:43
and you can do it unlimited number of
10:45
time. It doesn't uh you can basically
10:48
have as many markdown files. It doesn't
10:52
have any sort of limit. It can process
10:55
up to unlimited number of length. If you
10:58
if your markdown files are very large
11:01
then also it can process it. It is
11:04
doesn't have any sort of limits. It's a
11:06
great software. You can even choose a uh
11:10
external markdown file. If you have a
11:12
readymade file, you can have the these
11:14
two buttons are there. Choose file
11:15
button. If you click this button, you
11:17
can select a pre-existing markdown file.
11:20
If you want to convert that file into
11:22
PDF, simply click on export and save it
11:25
at P PDF. So, it will convert your file
11:28
into PDF. And uh if you want to write
11:31
it, you can even write it and it will
11:33
show you the live preview. You can see
11:36
that. So it works entirely in the
11:38
browser. You can see that live preview
11:40
is there. As you are typing it on the
11:42
right hand side, it is reflecting the
11:43
changes and like this. So now coming
11:46
back to the code guys, we are using uh
11:48
ReactJS. If you see 16 version and uh it
11:52
works in with the latest version as
11:54
well. You can try it after you purchase
11:56
it. You can make customizations
11:58
accordingly as well. You will get full
12:01
commercial rights after you make the
12:02
payment. You can basically use this
12:04
project, deploy it, earn a lot of money
12:06
as well by putting advertisement. People
12:08
will definitely use your project. So
12:11
these are the different components which
12:13
are there. Header component for the
12:15
header of the application. This is the
12:17
markdown component. This is actual
12:19
editor that you see right here.
12:22
And this is a live preview component. So
12:25
all the application is divided into
12:28
different components guys. Each
12:29
component is responsible for different
12:31
task that is there for the application.
12:34
So this is entirely coded in JavaScript.
12:36
You'll see the components are coded in
12:39
JavaScript JSX in ReactJS. So it's a
12:43
complete application guys. If you are
12:45
interested the link is given in the
12:46
description you will get the full source
12:48
code and uh thank you very much for
12:50
watching this video and uh if please hit
12:55
that like button subscribe the channel
12:57
Saksham Bangla is saying hi check my
12:59
messages how to start a freelancing work
13:02
bro you can basically email me if you
13:05
are interested give me a message at my
13:08
email address because uh at this moment
13:10
of time I can't answer your question
13:11
because I'm making a video so you can
13:13
basically email at this email address.
13:15
If you want to talk to me then also
13:18
write here send me a message and thank
13:20
you for your messages and I will see you
13:23
guys in the next live stream.