0:00
Welcome to this uh live stream. So in
0:01
this live stream I'll show you I
0:03
basically build out a VS code and GitHub
0:06
uh source code to image editor where you
0:09
can actually create screenshots of your
0:12
source code directly inside the browser.
0:14
It's a fully fleshed editor in uh
0:17
Nex.js. If you want to purchase the full
0:19
source code of this project, this is
0:21
actually the directory structure. Each
0:23
and every component is divided into its
0:25
TypeScript file. It's fully
0:27
customizable. You can add more features
0:29
to this project as well. So we are
0:31
running this project locally right here.
0:32
As you can just see right here, let me
0:35
show you the demo right here. It's
0:36
similar to VS code and GitHub. So right
0:38
here in the browser itself, you can
0:42
actually create screenshot. So
0:44
everything is customizable.
0:47
So here you can paste your code right
0:51
So as you paste the code here it will
0:53
automatically add the line numbers and
0:55
syntax highlighting will be there. So
0:58
here you can rename your file here
1:02
and then we have the option to export
1:05
this to a image file. So once you click
1:07
the export button automatically it will
1:10
be exported to an image file. So this is
1:12
actually a fullyfledged editor as you
1:14
can just see right here. If you want to
1:16
share code snippets, then you can
1:19
actually fully customizeable all the
1:21
background color. You can customize it
1:24
using this color picker. You can see how
1:27
easy it is. So here you can change the
1:30
background here. Everything is
1:33
If you want a transparent look, you can
1:38
You can even provide a shadow as well.
1:42
All these options are there. You can add
1:44
a border effect as well.
1:48
So here you can also change the radius
1:51
everything. You can make it rounded
1:53
corners as well. If you don't want to
1:56
show line number, you can toggle this
1:57
setting off. So you can even change the
2:01
font as well. All the major fonts,
2:03
premium fonts are there. You can just
2:05
change it with a single click. As you
2:09
you can even control the line height as
2:17
everything is customizable. You can even
2:19
put a watermark. If you don't want the
2:21
watermark, you can remove it.
2:28
So automatically code is also formatted
2:31
with a single click. So it's a single
2:33
page application directly runs in the
2:35
browser. If you need this, the link is
2:37
given in the description.
2:39
you can directly purchase this
2:45
So all the source code is will be
2:47
automatically downloaded once you
2:49
purchase it from Google drive
2:50
automatically. It's actually using the
2:52
latest version of uh NexJS as you can
2:57
So it's fully customizable. If you need
3:02
the link is given in the description.
3:04
It's a simple VS code and GitHub source
3:07
code to image editor where you can
3:10
adjust your settings and then click the
3:14
to simply export. So all the languages
3:16
are also supported here. You can even
3:18
change the theme as well whatever theme
3:20
that you want from here.
3:24
So if you don't if you can just see all
3:26
the languages are also supported Python,
3:30
HTML, Pascal, uh TypeScript everything.
3:33
So here with a single click you can
3:36
change the language here.
3:39
So the link is given you can directly
