Up next in 10
Javascript CodeMirror 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/6616c48ee113dcb251a8390d18216f02
Show More Show Less View Video Transcript
0:00
uh Hello friends welcome to this video
0:02
so in this video we'll be looking at
0:04
another syntax highlighting Library
0:07
which is code mirror code mirror is
0:10
actually a JavaScript open-source syntax
0:13
highlighting uh editor you may say with
0:18
com with it has various themes to
0:22
highlight the source code if you have
0:25
and it has line numbers so it actually a
0:28
browser editor where you can actually
0:30
write code in different languages so you
0:32
will see this drop down here you can
0:34
select your uh language it supports many
0:37
languages but for this example I just
0:39
show you four languages JavaScript
0:41
python CSS you need to select your
0:44
language and then you can select your
0:45
favorite theme so as you change the
0:48
theme you will see we can actually write
0:51
the code right
0:54
here you can see
1:04
so you can change the theme here you can
1:07
select your favorite
1:13
tee so if you have a bunch of HTML code
1:16
let me want to highlight
1:20
this so here you just need to change the
1:26
from language here so to this language
1:29
you can see see how easy it is to
1:31
highlight any code right
1:34
here so it comes with its own themes
1:37
right
1:39
here so this is actually the library
1:42
code mirror if you just write on Google
1:45
this is their official website Cod
1:47
mirror.net it's a code editor component
1:50
if you are developing applications which
1:53
contains highlighting code you can use
1:56
this code editor library and it has a
2:00
lot more examples given in the
2:02
documentation you
2:03
can uh just integrate with any frontend
2:08
framework of JavaScript but specifically
2:11
in this video we will look at how to
2:13
integrate this inside the browser using
2:15
directly the
2:17
CDN so you will see I've already
2:19
included all the CDN for all the themes
2:22
so this is the main CSS file for all the
2:24
themes which are there Dracula monai
2:27
Eclipse material code mirror so just
2:30
included the CDN links for that and also
2:34
for highlighting specific languages we
2:36
have CDN links if you see JavaScript
2:39
python CSS so you will find all the
2:42
source code in the description of this
2:44
video you can copy paste it and
2:48
uh now let me show you how to develop
2:52
this so I will simply delete everything
2:55
and start from scratch so I just
2:58
included the CDN links here for the
3:01
library so that we can use it in the
3:04
browser and now for the HTML we will
3:07
have the container
3:09
class inside this we will have the
3:12
heading which is
3:15
uh code mirror
3:20
syntax highlighting and
3:26
uh we will give it basically a class of
3:29
margin bottom four
3:31
and after this we will have a select
3:35
field where we will be allowing the user
3:37
to Simply select their language so
3:41
language select I
3:46
will give it a label select the language
3:50
and after that we will have different
3:52
choices in the select element we'll give
3:55
it an ID
3:58
here of language select and here you'll
4:02
be having different
4:06
options we will give it a class of form
4:09
select bootstrap class we also using
4:13
bootstrap for Designing the user
4:14
interface I included the CDN for this of
4:19
bootstrap and then we have different
4:21
options for different programming
4:23
languages JavaScript
4:28
python then is
4:30
CSS so it supports multiple languages
4:33
you can check the
4:34
docs I'm just including the basic ones
4:43
PHP
4:45
then it can even support
4:48
XML
4:50
HTML SL XML so various languages are
4:54
there and uh if you refresh it now and
4:58
it will look something like this we have
5:00
the
5:01
dropdown and similarly we will have the
5:04
second dropdown which will be for
5:07
selecting the theme so here the user
5:10
will select the
5:15
theme so we'll give it an ID here to it
5:18
tee
5:24
select so we will have different options
5:26
right here for the themes which are
5:28
supported by code mirror you will see
5:30
default Dracula monokai Eclipse material
5:33
for each theme that you are using you
5:35
need to include the CDN for the CSS and
5:37
the JavaScript I've already included all
5:40
the CDN for that that's why we can use
5:42
these themes and now after doing this we
5:45
will have a div tag where we will be
5:47
mounting the
5:49
editor so here we have given this I
5:53
class to it of editor container so here
5:56
we will be mounting the code editor
6:01
so after this we will write our custom
6:03
JavaScript code in a different file so I
6:06
include this
6:08
script.js so right inside this we will
6:11
first of all get reference
6:13
to the editor where we need to mount it
6:18
so we have given the class so we will
6:20
simply do editor container we will store
6:23
this reference in a variable so we will
6:26
say editor container
6:30
and now we'll be initializing the editor
6:33
by simply using the code mirror
6:39
class and here we will be passing the
6:42
editor container where you need to mount
6:44
and an object so this object contains
6:47
various properties first if you want to
6:50
support the line numbers you will put
6:51
here true if you don't want the line
6:54
numbers you will put false here and then
6:56
the mode which language you want to
6:58
highlight so in my case I need to
7:00
highlight the JavaScript language and
7:02
here you will provide the theme so I
7:05
will go with the default theme and the
7:07
fourth option here is the actual value
7:11
you need to set the default value so
7:13
here you can paste your
7:16
code whatever code that you want to
7:18
highlight I will just put this comment
7:20
right
7:23
here so if you refresh now you will
7:26
actually see now here you can actually
7:29
write write your code JavaScript
7:44
code so in this way you can write the
7:47
JavaScript code you can see it is now
7:49
highlighting this so here you can change
7:52
if you don't want the line numbers you
7:54
can put here false so now the line
7:57
numbers will not be shown but it it's
7:59
recommended that you put the line
8:01
numbers and here you can change this
8:03
language to python so here now you will
8:06
be highlighting the Python
8:12
language you can
8:16
see this is python code so here you can
8:20
change any option right here these four
8:23
options are supported line numbers Moree
8:25
theme and the value
8:31
and after you do this we can actually
8:34
bind a listener when we change the theme
8:39
or when we change the language first of
8:42
all so we can basically bind the event
8:45
handler to it so when we change that
8:47
value this event handler will function
8:50
will actually execute and here we can
8:53
store which language the user has
8:56
selected in this variable and then we
8:59
can simply change the editor and it
9:02
contains a option set option method here
9:05
we
9:07
can select the mode with the selected
9:11
language and same thing we can do
9:15
this to the theme as well so if the
9:19
theme is changed by the
9:21
user you can bind a event handler to it
9:25
so this function will execute we will
9:28
actually get the theme which is selected
9:30
by the
9:33
user and then we can set this option to
9:36
the editor so set option itself and here
9:40
we need to set the theme to the selected
9:43
theme that's all so if
9:46
you now paste let's suppose if I
9:51
paste this JavaScript code if I want to
9:54
change the theme
10:00
so if you see now cannot read properties
10:02
of
10:16
undefined just
10:27
refresh I think some error has take on
10:29
this let me
10:38
paste so all the source code will be
10:41
given in the description so let me paste
10:44
this I think some typo
10:51
mistake so now you can see as we are
10:54
changing the theme the theme is changing
10:57
you can see that
11:02
so if you want to do the same thing with
11:04
the languages so if you're writing now
11:07
the python we have selected python so
11:09
this is simple Python program so here
11:13
you will Define the python function
11:32
so here you can see you can
11:36
write and syntax highlighting different
11:39
languages with different themes so this
11:42
was the code
11:44
mirror Library full example how to
11:47
integrate it right in the browser itself
11:49
with different themes so you can check
11:51
out their
11:54
documentation to
11:57
actually so this this is their examples
12:00
some more advanced examples are also
12:03
there with autoc completion
12:10
internal so thank you very much for
12:13
watching this video and do check out my
12:15
free media tools website as well which
12:18
contains thousands of free tools related
12:20
to audio video and
12:22
image
12:24
so please hit that like button subscribe
12:27
the channel and I will be seeing you in
12:28
the next video
#Programming
#Web Services
#Web Design & Development
#Scripting Languages