live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Build a React.js Markdown File to PDF Editor & Converter in Browser Using Highlight.js in Javascript
Jan 9, 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/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
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 react CH which which
0:14
essentially converts your markdown files
0:18
into PDF documents so with live preview
0:22
in the browser so you can see that I'm
0:25
running this application on Local Host
0:29
30 1 Port number if I just refresh here
0:33
you will automatically see on the left
0:36
hand side you will be able to write
0:39
sample 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:52
format of markdown and on the right hand
0:55
side you will actually see the live
0:57
preview of whatever markdown that that
1:00
you will write so I can make any sort of
1:02
changes right here and basically it will
1:05
deflect whatever you will write right
1:07
here so I can basically change this edit
1:10
this you can basically write your own
1:12
markdown if you have knowledge in
1:14
writing markdown files it's a complete
1:17
editor fully built inside react CH in it
1:21
works in the browser it doesn't require
1:23
server site 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 save
1:34
this as a you will simply click this
1:36
button which is export so as you click
1:38
this button of export guys what it will
1:41
do it will actually export or save this
1:45
file as a PDF file simply select here
1:47
save as PDF and click on save it will
1:51
ask for the location just select the
1:53
location click on save so your file has
1:56
been saved if I show you this is all the
2:00
markdown has been successfully converted
2:03
to a simple PDF document so it
2:06
automatically split into two pages
2:09
because it was uh the markdown file was
2:12
larger so it basically split the
2:16
code all the markdown that you have
2:18
written into PDF into two pages this is
2:20
the first page this is the second page
2:23
it's a fully fleshed client side
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 you
2:34
will actually see the output as of now
2:38
just as you write basically on the right
2:40
hand side you will actually it's a fully
2:43
fleshed editor and you will see the live
2:46
preview as you are basically writing
2:48
your any
2:51
markdown 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
react CH and
3:08
uh 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:35
editor with live preview so all this
3:38
JavaScript code it's built entirely in
3:41
react CH in the package J Json file you
3:45
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 know
3:55
it's a syntax highlighting because if
3:57
you see basically as we are writing our
4:01
markdown uh links are highlighted in
4:04
different colors and basically code is
4:07
also highlighted in different colors so
4:09
all these things all these coloring
4:11
schemes are coming because of
4:13
highlight.js which is essentially a
4:15
library so basically if you writing this
4:18
code right here it is if you you can
4:21
basically search for this package
4:23
highlight. J it's it's a library for
4:27
syntax highlighting if you want to do it
4:29
in our
4:30
projects it's a open source library that
4:33
we are using guys and it's very much
4:36
helpful to
4:37
actually do this syntax highlighting
4:39
inside your application so we are doing
4:41
it and the second Library we are using
4:44
it's a code mirror code mirror basically
4:47
it's a code editor component for the web
4:49
application so if you want to implement
4:51
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 uh this component library
5:10
inside our react Chase project so the we
5:12
are using these two open source
5:14
libraries to actually make this awesome
5:16
little converter right in the browser
5:18
itself which actually converts your
5:20
markdown files into PDF file you can
5:23
even select a file as well if you have a
5:26
markdown file available to you so I have
5:28
the sample to markdown file I can select
5:32
this file and basically all these things
5:35
it will be listed out you will see
5:38
that so on the right hand side you will
5:41
see that with images if you have a
5:44
existing markdown file then also you can
5:47
convert that file into the live preview
5:50
it will show you and now you can simply
5:52
save 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 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 it
6:13
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 syntax
6:23
highlighting is automatically done guys
6:25
in this application the tables the code
6:28
the syntax highligh
6:30
these are the codes samples the headings
6:33
the bullet points uh numbering line
6:37
numbering all this is done automatically
6:40
guys it converted so
6:42
exactly uh you can see 12 pages are
6:45
there in this PDF document it is
6:47
converted so basically we submitted this
6:50
markdown file and we see this live
6:52
preview you can even edit this file
6:54
basically you can change it like
6:57
this it's a complete editor guys
7:00
ultimate editor where you can actually
7:02
modify the file of mckown basically make
7:05
some changes and then convert it to PDF
7:08
documents it's a nice little project the
7:10
link is given in the description you can
7:12
check out and purchase the full source
7:14
code you will actually get this full
7:15
source code and you can actually deploy
7:18
this as a real you can see we are
7:20
running it in Local Host 30001 so once
7:23
you basically extract the content in the
7:25
zip file after you make the payment you
7:27
will get the zip file from Google Drive
7:29
you just need to
7:33
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 react Chase application so just
7:47
you need to invoke this command before
7:49
you start your application so now to
7:53
start this application at Port number
7:55
30001 you will actually run this command
7:58
which is npm run start so I've already
8:02
installed it so it will take some time
8:03
to install all the modules and then run
8:06
this command which is npm Run start but
8:08
this will actually start your react CHS
8:11
application which is markdown Editor to
8:14
PDF right in the browser itself which
8:17
will run on Local Host
8:21
30001 similarly we if you want to deploy
8:24
this to a real domain name then also you
8:27
can basically build out your project the
8:29
build command is npm run build this will
8:32
basically Minify the code it will give
8:35
you static HTML CSS JavaScript code that
8:38
you can deploy to a real domain name so
8:41
this makes it easy for you to actually
8:44
do this
8:45
so this will automatically start your
8:48
application on Local Host 3,000 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 steps guys and your application
9:01
will
9:03
start we are actually using these two
9:05
packages code mirror and 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 so
9:18
this application will start so it's a
9:21
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
index of markdown you will definitely
9:31
know you can see that so you can enter
9:35
valid markdown markdown files are
9:37
typically used in blogging if you want
9:40
to design a custom blog markdown files
9:43
are used in static websites and it's
9:45
also used in designing resume and it's
9:49
very relevant in programming business if
9:51
you are a tech guy you will definitely
9:53
know 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
marked down files into PDF documents and
10:01
it's a complete solution guys it works
10:03
in the browser client site fully client
10:05
site no server site code is in wall it
10:07
entirely coded inside react CH 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:28
it looks
10:30
tremendous and the main advantage is
10:32
that it works in the browser no third
10:34
party you need don't don't want to waste
10:37
your time in going to third party
10:38
websites to actually carry out the
10:40
conversion of markdown to PDF it works
10:42
in the browser and you can do it
10:44
unlimited number of time it doesn't uh
10:47
you can basically have as many markdown
10:51
files it doesn't have any sort of limit
10:54
it can process up to unlimited number of
10:57
length if you have if your smone files
10:59
are very large then also it can process
11:02
it it is doesn't have any sort of limits
11:06
it's a great software you can even
11:08
choose a uh external markdown file if
11:11
you have a rimed file you can have the
11:13
these two buttons are there choose file
11:15
button if you click this button you can
11:18
select a pre-existing markdown file if
11:20
you want to convert that file into PDF
11:23
simply click on export and save with
11:24
that P PDF so it will convert your file
11:28
into PDF
11:29
and uh if you want to write it you can
11:32
even write it and it will show you the
11:34
live preview you can see that so it
11:36
works entirely in the browser you can
11:38
see that live preview is there as you
11:40
are typing it on the right hand side it
11:42
is reflecting the changes and like this
11:45
so now coming back to the code guys we
11:47
are using uh react CHS if you see 16
11:50
version and it works in with the latest
11:53
version as well you can try it after you
11:56
purchase it you can make customizations
11:58
accordingly as as well you will get full
12:00
commercial rights after you make the
12:02
payment you can basically use this
12:04
project deploy it earn a lot of money as
12:06
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 editor
12:19
that you see right
12:21
here and this is a live preview
12:24
component so all the application is
12:27
divided into different components guys
12:29
each component is responsible for
12:31
different task that is there for the
12:32
application so this is entirely coded in
12:36
JavaScript you will see the components
12:38
are coded in JavaScript jsx in react CH
12:42
so it's a complete application guys if
12:44
you are interested the link is given in
12:46
the description you will get the full
12:48
source code and uh thank you very much
12:50
for watching this video and uh if please
12:54
hit that like button subscribe the
12:56
channel sakam Bangla is saying hi check
12:58
my messages how to start a freelancing
13:01
work bro you can basically email me if
13:04
you are interested give me a message at
13:07
my email address because uh at this
13:09
moment of time I can't answer your
13:11
question because I'm making a video so
13:13
you can basically email me at this email
13:15
address if you want to talk to me then
13:18
also write here send me a message and
13:20
thank you for your messages and I will
13:22
see you guys in the next live stream
#Programming
#Other