Up next in 10
How to Edit,Render & View Markdown Files in VSCode IDE With Live Preview Editor
0 views
Jul 5, 2025
Get the full source code of application here:
View Video Transcript
0:00
Uh hello guys, welcome to this video. So
0:02
in this video, I'll show you how to
0:04
open, render and view markdown files
0:06
with live preview inside your VS code uh
0:09
editor. So markdown files are very much
0:12
important. So go to the extensions and
0:14
just search here markdown
0:17
preview.
0:19
So you will see this uh appear right
0:22
here. This is the extension that I'm
0:24
talking about. It's used by almost 7
0:26
million developers and it's called as
0:28
markdown preview enhanced.
0:31
So simply click the install button and
0:35
after installing it
0:38
the extension will be activated
0:40
globally. So now simply open any
0:43
markdown file. So let's suppose I have
0:45
this sample domarkdown file. So as it is
0:49
opens you will see on the top right
0:52
corner of the screen you will see this
0:54
button appearing markdown preview
0:56
enhanced open the preview to the right
0:59
hand corner of the screen. So as you
1:00
click this button you will see on the
1:02
right hand side a live preview will be
1:05
generated of this markdown file. So now
1:08
you can easily read the markdown file
1:10
without leaving your VS code and it
1:13
actually
1:16
basically this is your images, this is
1:18
your plugins, this is your data, this is
1:21
the syntax highlighting each and
1:23
everything is uh very effectively
1:27
highlighted and you can see how easy it
1:29
is to read your markdown files. You can
1:32
even edit it edit them as well. Let's
1:35
suppose if you make any sort of changes
1:37
it will be reflected back automatically.
1:40
Let's suppose I change this to anything.
1:43
If I make changes you will see
1:44
automatically the live preview will be
1:46
there. You can make any sort of changes.
1:49
Just drag down make the changes and you
1:51
will see the reflection back
1:54
automatically. This is the very good
1:57
plug-in that you can install inside VS
2:00
code to actually live preview and edit
2:02
your markdown files directly inside VS
2:04
code with live preview any other file.
2:08
So it will add this option at the right
2:11
hand corner of the screen. So this
2:13
preview window will open. So it will be
2:16
right here
2:18
after you activate this extension. So
2:20
then it will look like this. You will
2:23
see all these images. If I remove this
2:25
image, it will be gone. If I again
2:27
replace it.
2:29
So this is the extension markdown
2:30
preview enhanced. Simply install it and
2:33
start using it to preview and edit your
2:36
markdown files. Uh also check out my
2:39
website freemediattools.com
2:42
uh which contains thousands of tools.