live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Angular @ngstack/code-editor Syntax Highlighter Example to Build VSCode Code IDE in Browser Using TS
Feb 5, 2025
Get the full source code of application here:
https://codingshiksha.com/angular/angular-monaco-syntax-highlighter-example-to-build-vscode-code-ide-in-browser-using-typescript/
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
uh Hello friends welcome to this video
0:02
so in this video I will show you how to
0:04
build out a vs code editor inside your
0:07
angular application where you can
0:09
actually write code inside any language
0:13
so you can see we actually get these
0:15
automatic suggestions as well so I'm
0:17
writing the PHP code so it is having
0:19
this nice little syntax highlighting
0:21
alongside with the line numbers as well
0:22
so it supports multiple languages with
0:25
multiple themes so I can change the
0:27
language to JavaScript now so now what
0:30
happens you will be able to write
0:32
JavaScript code so right here it's a
0:36
simple little editor code dat editor so
0:40
there is a package here specifically
0:42
built for angular applications which
0:43
allows you to integrate this code editor
0:47
with syntax
0:48
highlighting so you can even pass
0:50
multiple themes if I change it to
0:54
vs so this is I think
1:00
vs Black
1:02
theme yeah so it actually have various
1:06
themes available to us you will see
1:10
that so you will see these automatic
1:13
suggestions also so there is a package
1:15
here uh which is there if you search on
1:18
npmjs.com
1:20
at theate NG stack code editor this is
1:24
actually the name of the
1:26
package the command is simple you
1:29
install this package and it's almost
1:32
having 2600 weekly downloads so I've
1:34
written a step by-step blog post on my
1:36
website alongside with the full example
1:39
code you can go to the description to
1:41
get all the source codes so the very
1:43
first thing we need to do we need to go
1:45
to your app. module. typescript file and
1:48
just add this import
1:50
statement so import code editor module
1:54
which will be coming from this package
1:55
at theate NG stack code editor and then
1:58
you go to the import set AR and then add
2:01
this code editor module. for root this
2:04
is all the configuration which is needed
2:06
so once you do this you come to your
2:08
app. component. HTML so we declare this
2:12
editor we have
2:14
this directive available to us ngx code
2:19
editor the opening and the closing tag
2:22
so in this way you can initialize this
2:24
code editor and here you need to pass
2:27
some options first of all the theme
2:29
options so here you can pass the theme
2:32
here which is
2:33
vs dark so this will make your theme as
2:38
vs
2:42
Star so in this way you will get all
2:45
these
2:50
suggestions so then we also have the
2:52
option to attach a
2:55
language so let's suppose now I want to
2:57
Target the PHP language so I just need
3:00
to pass PHP so now I will be able to
3:03
write the PHP code it's that easy you
3:05
can see that the syntax highlighting
3:07
will be there for each language
3:10
automatically so now in the typescript
3:14
file if you
3:19
see we
3:24
can it's that easy guys you can see that
3:27
so
3:32
but here we do need to include some
3:33
options right here first of all your
3:37
dependencies and the actual options so
3:39
if you do need the context menu as well
3:42
you can provide these dependencies one
3:44
by one such as the code editor it's the
3:46
array of dependencies we are passing
3:48
right here and also these options if you
3:51
need the context menu then you can even
3:53
provide them inside your options so
3:56
context menu through mini map enabled so
3:59
here you can pass these options
4:02
dynamically so there is an option right
4:05
here which says
4:09
dependencies you can pass these
4:13
dependencies and then your
4:17
options these two parameters it actually
4:20
take and here we can
4:27
change so this is your theme will be
4:29
changed you will see
4:36
that so you'll get these suggestions so
4:39
in this way guys you can build out this
4:41
vs code code editor if you want to
4:44
integrate this inside your angular
4:45
application so this actually supports
4:48
syntax highlighting all these themes are
4:53
available so you can see that
4:57
so and change this language let's
5:00
suppose I want to put Javascript so now
5:03
I will be able to write the JavaScript
5:06
code so same thing so in this way you
5:09
can integrate the vs code editor inside
5:11
your angular application right in the
5:13
browser itself you can allow user to
5:15
type their code in the code editor using
5:18
this nice little package which is
5:20
specifically developed for angular
5:22
applications so all the source code is
5:25
given in the description you can check
5:26
out my blog
5:28
post and also check out my website as
5:31
well guys free mediat tools.com uh which
5:34
contains thousands of tools regarding
5:36
audio video and MH and I will be seeing
5:39
you guys in the next video
#Programming