live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Angular Ace Code Editor Example to Integrate Ace Syntax Highlighter With Line Numbers in Browser
Jan 26, 2025
Get the full source code of application here:
https://codingshiksha.com/angular/angular-ace-code-editor-example-to-integrate-ace-syntax-highlighter-with-line-numbers-in-browser/
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 guys welcome to this video so
0:02
in this video I will show you how to
0:04
integrate the ace uh code editor inside
0:07
the angular application a is actually an
0:09
open- Source syntax highlighter Library
0:12
if you want to actually allow user to
0:15
copy paste any source code so if you
0:18
have a code blog website if you want to
0:20
share code Snippets this will be a nice
0:24
little package in angular if you want
0:28
to write source code or share the source
0:31
code with others so you can see we can
0:33
write in any
0:35
language so it is we writing it in
0:37
JavaScript you can see it supports line
0:40
numbers multiple themes are also
0:43
supported so you can simply write this
0:45
source code the syntax highlighting as
0:48
I'm writing this code if you'll see it's
0:49
a JavaScript code these are the variable
0:52
names this is actually a function so the
0:55
syntax highlighting is you can see it's
0:58
you can clearly see it's a Java script
1:00
code and uh here you can see in that in
1:05
this code we are specifically targeting
1:08
JavaScript so if I change this to
1:13
PHP so now you can write the PHP
1:16
code can see
1:23
that so in this way you can Target any
1:27
language so the package name is is
1:31
uh if you want to get
1:34
started if you go to npmjs.com just
1:37
search for this package ng2 dasas
1:41
editor so this is actually the
1:44
package for implementing this Ace editor
1:48
the command is simple you simply install
1:50
this I've already installed it so it's
1:52
almost having 5,000 weekly downloads
1:55
so I have written a complete
1:58
step-by-step blog post on my website and
2:00
also this full source code is given in
2:02
the description so first of all I will
2:05
show you how to get started here so just
2:08
need to go to this file ab. module. TS
2:11
file and simply you need to import this
2:14
module so we simply say import Ace
2:18
editor module and it will be coming from
2:21
this package NG to Ace
2:25
editor so we simply require it and then
2:28
we now need to
2:30
simply go to the Imports array and
2:32
simply add this module so Ace editor
2:36
module and then you can close this file
2:38
and then we come to the app. component.
2:42
HTML file right here so this is your
2:44
template file and wherever you need to
2:47
embed this you
2:49
simply write the code
2:52
here let me have a div section and
2:54
inside this we use this directive
2:56
ace-editor
3:01
so it actually
3:03
takes the
3:06
element so I have given this ID editor
3:10
so you just need to give it a
3:12
height so we can give it a custom CSS so
3:16
height let's suppose 600 pixels so as
3:19
soon as I did do
3:22
this can just make it in single quotes
3:30
so this is in 600 pixel so as soon as
3:34
you do this you will see
3:36
the you will have the space here you can
3:39
directly
3:40
write the code here if you see
3:44
that you can copy paste any
3:49
code so here we are writing JavaScript
3:52
code and then if you want to configure
3:54
all these options you come to the app.
3:56
component.ts file and right inside this
3:59
file here we are targeting this view
4:02
child we are passing the same ID here
4:04
which we have given which is/ editor so
4:08
we are targeting this element here and
4:12
then we have setting these editor
4:15
options right here so if you want to
4:17
show the line numbers you will put here
4:19
true if I change this to false here you
4:22
will see the line numbers will not show
4:24
so the line numbers if you want it you
4:27
can toggle this property and it takes a
4:30
Boolean parameter so if you do want to
4:32
show line numbers you will put it to
4:34
true and tab size you can control it by
4:37
passing for here so it controls the
4:39
amount of space which is there in
4:41
between the lines that you write here so
4:43
you can see that you can control the
4:47
spacing and then we can control if you
4:50
only want the user to read the code then
4:54
there is this option read only and you
4:56
can set this option to true so now what
4:58
happens you can't can't edit the code so
5:01
you can't type in this code you can only
5:03
view the
5:05
code so I can change this to FSE so that
5:08
I can write this code right
5:10
here and the Highlight active line there
5:13
is this option if you want this
5:15
highlighting to true so just make this
5:17
option true and here you can control the
5:20
language so we are targeting JavaScript
5:22
language and here you can put the themes
5:26
out there so we are having the vs code
5:28
theme so if you go to a editor you will
5:32
see all the themes which are supported
5:34
by this editor this is their official
5:37
website and uh you can go to the API
5:41
reference
5:43
and see all the themes which are
5:45
supported
5:50
here so you can directly write on Google
5:53
so as editors themes
6:03
so we also have the Chrome theme as well
6:05
so if I change this to
6:15
Chrome if I paste this code
6:19
here so it will look something like this
6:21
you will see the highlighting will be
6:23
slightly different because we have
6:25
changed this theme to Chrome so each and
6:28
every theme has a different color
6:29
combinations so depending upon which
6:32
theme that you like so I have given all
6:35
the source code in the description so if
6:37
you need this full source code you can
6:39
go to the description uh it's very easy
6:40
to configure and once you configure it
6:43
it's very easy to share code Snippets
6:46
using this as editor package in angular
6:49
CHS angular so thank you very much for
6:52
watching this video and also check out
6:54
my website as well free mediat tools.com
6:57
uh which contains uh thousands of tools
7:00
regarding audio video and MH and I will
7:03
be seeing you guys in the next video
#Programming
#Software
#Scripting Languages