live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Javascript Ace Editor Syntax Highlighter Example to Highlight Source Code in Browser Full Example
Jan 9, 2025
Get the full source code of application here:
https://gist.github.com/gauti123456/1f3436381fa396a81304aa334a35ed99
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video we'll be looking at uh
0:04
another syntax highlighting open source
0:07
JavaScript library which is called as
0:10
Ace editor Ace editor is again
0:14
a code editor that you can Implement
0:17
right in the browser itself if you want
0:19
to highlight certain sections of your
0:21
source code so it comes with syntax
0:25
highlighting in different languages and
0:28
it also supports various themes as well
0:30
so this is their official website a
0:33
editor high performance code editor
0:36
component for the web so I will show you
0:38
a very simple example in the browser so
0:41
here you can paste any source
0:44
code so I pasted HTML source code mixed
0:49
with CSS and JavaScript you can see it
0:51
is showing line numbers with sting
0:53
highlighting you can select your
0:55
language so this is HTML code so I will
0:58
select HTML
1:00
and then we have different themes out
1:02
there you can see Dracula theme we have
1:05
Mona you can see different themes
1:07
supports so it's a code editor in the
1:11
browser itself and it supports multiple
1:14
languages you can now even write python
1:17
code as
1:25
well so in this way you can
1:32
Define python code here in
1:37
different languages with different
1:39
themes so now to get started uh as I
1:42
already told you we are using this as
1:45
editor this is their official
1:48
website I will show you a very basic
1:51
example which runs in the browser and
1:53
we'll be using the CDM for a
1:56
editor and for doing this I will start
1:59
from from
2:01
scratch for building the user interface
2:04
we are also using bootstrap as well so I
2:09
just included the bootstrap CDN at the
2:11
very
2:12
top alongside with the ace editor CDN as
2:17
well so all the source code that I will
2:18
use in this video is given in the
2:20
description of this video so you can get
2:23
that so now to get
2:26
started we will write the editor
2:31
the UI for that we will have the div
2:35
which will have the container class and
2:38
margin top
2:40
four we will have the heading which will
2:43
have
2:46
uh this a editor Dynamic syntax
3:04
so inside this we will have a label
3:06
where the user can select uh different
3:10
languages and this supports all the
3:14
languages all the major
3:17
languages so for this we will have a
3:19
simple select list where the user
3:27
will we'll give it an ID uh a form
3:30
select bootstrap class and here you'll
3:33
be defining different
3:36
options so one such option will be
3:47
JavaScript so here we'll be replacing uh
3:54
HTML then we have
3:58
CSS then we have have PHP all the major
4:03
languages so once you have this the
4:06
second thing you need to do is for
4:08
the theme select so similarly I will
4:12
simply copy this and paste
4:17
it and this time this for selecting the
4:22
theme so change the ID Here theme select
4:26
and so we we will have various themes so
4:30
you can go to the documentation of Ace
4:32
editor and check out more themes as well
4:36
so I will
4:38
paste these
4:40
options so Chrome which is a default
4:43
theme Dracula monoi Eclipse triplet all
4:46
these themes are
4:50
there and lastly after doing this we
4:54
will have the actual editor which will
4:56
be we will give it an ID here of editor
4:59
so here you will paste your
5:02
code or type your
5:07
code
5:09
here so if you refresh your application
5:12
it will look uh something like this the
5:15
editor has not been mounted yet you
5:17
can't type any sort of code now for that
5:20
you do need to write uh JavaScript code
5:23
and we need to
5:25
include the script JS file so I just
5:29
created Creed this file here so here you
5:32
will Mount Your editor you need to
5:35
initialize the ace editor so for
5:38
initializing it you need to Simply call
5:41
a. edit and here you need to pass the
5:45
reference in which so
5:48
editor we will simply pass it so this
5:53
actually is the ID that we have given
5:55
right here so we are simply passing the
5:57
ID right here so
6:00
after doing this we can set some options
6:02
right here set the theme and we will be
6:05
setting this theme which is the Chrome
6:08
theme and then we will be setting the
6:11
second option which is for the
6:14
mode by using the set mode function so
6:17
here we will be setting this mode a mode
6:20
slash followed by which language you
6:22
want to highlight so in this case we
6:24
want to highlight the JavaScript
6:26
language so here we'll be setting this
6:27
language so if you refresh
6:38
now if you go to console here
7:07
it should now the editor should pop in
7:11
now a. edit followed by the ID that you
7:15
have given right
7:27
here all the s code that I will use is
7:31
given in the description
7:37
so so you can see this needs to be there
7:41
outside this select list they have given
7:44
this ID so you will now see the editor
7:47
will be there so here you can paste any
7:54
code so you can see we have pasted this
7:57
code we will also see errors
8:00
if any sort of error take place you will
8:01
see this cross signs which will signify
8:04
that you have some error because it's a
8:06
JavaScript language we need to change
8:08
this here to
8:09
HTML but uh if we change this we do need
8:12
to write code for this so if I change
8:15
language right here we need to bind a
8:19
event handler for that so when we
8:24
change the language here which is we
8:27
given a ID to it of language
8:30
select we will bind a event handler to
8:35
it so this change event handler will
8:38
take place this call back function will
8:41
execute and
8:48
whatever selected
8:50
language we will get and then we just
8:54
need to editor and session and set mode
8:59
and here we need to change the mode
9:02
here to the selected language and same
9:06
goes with
9:08
the drop down for the theme as well so
9:11
here be targeting it by the
9:13
ID we will take the
9:18
selected theme
9:22
and use this function set
9:26
them editor do set them
9:35
so like this so if you now copy this
9:44
code so change this to
9:58
HTML for
10:48
uh I think this needs to be selected
10:57
here so now you can see as we are
11:00
changing this drop down the theme has
11:03
been changing similarly you can change
11:05
the language as
11:07
well so in this way you can easily
11:10
integrate the a editor inside the
11:13
browser if you want to highlight any
11:15
source code you can use this open source
11:18
Library it supports multiple languages
11:21
multiple themes if you want to highlight
11:24
code so
11:30
you can highlight
11:33
this and make sure that you we have
11:37
targeting this ID here editor and make
11:39
sure you give a fixed width you can give
11:44
width of 100% height you can change this
11:47
height to
11:49
500 so that this editor will
11:52
have high
11:55
width High height you can see that
12:02
so do check out free mediat tools.com as
12:05
well which contains free thousands of
12:08
free tools related to audio video and
12:11
image please hit that like button
12:13
subscribe the channel and I will be
12:15
seeing you in the next one
#Programming
#Open Source
#Computer Education