videocam_off
This livestream is currently offline
Check back later when the stream goes live
Up next in 10
Javascript Prism.js 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/40c9853db0ac1e0654dab3e3211aa4b6
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video we will look at how to
0:04
integrate uh prism do JS which is
0:08
actually a syntax highlighting library
0:10
for JavaScript if you want to highlight
0:13
your source code in different languages
0:15
in different themes you use this let me
0:18
show you an example so if you have a
0:22
source code that you want to highlight
0:24
we have this application right here we
0:26
have a text area we'll simply copy paste
0:29
the source code that we want to
0:31
highlight then we will select the
0:33
language here you can have more
0:35
languages here prism supports unlimited
0:37
number of languages so this is HTML code
0:40
so we will select the HTML language from
0:42
dropdown and click on the format code
0:45
button and you will actually see the
0:47
code will be formatted with syntax
0:50
highlighting and you can just see it's a
0:53
HTML code and also it contains CSS code
0:56
as well alongside with JavaScript code
0:58
as well so we have different themes out
1:01
there so you can from the drop down you
1:04
can select various themes that prism
1:06
supports so as you change the theme you
1:10
will see the highlighting will also
1:12
change dynamically so I will show you
1:15
this complete example how to integrate
1:17
prism dogs inside your application if
1:20
you want to highlight or syntax
1:22
highlight any sort of code inside your
1:24
application then prism is a great
1:26
application great library and all the
1:30
source code that I will use in this
1:31
video is given in the description so if
1:34
you don't know about prism prism JS is a
1:37
syntax highlighting Library this is
1:39
their GitHub uh official website it's
1:43
used by millions of websites which are
1:45
used for synx highlighting if if you
1:47
have a coding blog if you do any sort of
1:50
coding then it's a great Library so
1:53
we'll show you how to use it right in
1:56
the browser itself using a CDN so let's
1:59
start so first of all you need to make a
2:01
index.js file sorry index.html
2:06
file and we will first of
2:15
all so this is actually the thing
2:18
so let me first of all make a simple
2:21
template prism JS
2:25
example in
2:27
browser so as I already told you we uh
2:31
we will be using the CDM so for
2:33
including the
2:35
CDM we will actually be getting this
2:38
from the
2:39
internet so stack path boots so first of
2:43
all in order to build this we are also
2:45
using bootstrap as well so I will simply
2:47
copy paste the CDN or bootstrap as
2:50
well and then we are also using the
2:53
prism JS library and it contains the
2:57
stylesheet so we are simply copy pting
2:59
in the main. CSS
3:03
file and similarly we do need to include
3:06
the JavaScript CDN as well
3:10
so after the body you need to paste the
3:13
JavaScript CDN which prism do
3:16
min.js so this will actually allow us to
3:19
use the this syntax highlighting inside
3:22
the browser and now we will construct
3:25
the interface we will use the container
3:27
class of bootstrap inside this we will
3:29
have an heading which will simply say
3:31
that source code form
3:36
matter we will give it an class
3:43
here margin from the Y Direction
3:47
4 and then we will have uh the form
3:50
group
3:55
class we will have a label right here
3:58
where we will allow the user to actually
4:01
enter the their source code that needs
4:03
to be
4:06
highlighted and then we will have a
4:09
simple text area where the user will
4:11
enter their source code so we will
4:14
basically give it an ID here to it so
4:16
that we can Target in JavaScript which
4:18
is code input we will be giving a class
4:21
here bootstrap class of form
4:26
control and rows I will give it as
4:30
10 and a placeholder simply telling the
4:34
user enter your code
4:37
here like this that's all so if you just
4:41
open this now it will have this text
4:43
area where the user will enter their
4:45
source code and then we need a simple
4:50
button and also you will have a
4:53
dropdown where the user will select
4:56
their language so here we'll simply be
4:59
telling the user you need to select your
5:01
language which code that you are
5:03
submitting so you will have a simple
5:05
select list and we will basically give
5:08
it an ID here to this
5:11
of language
5:14
select and we'll be giving a class here
5:16
of bootstrap form control we have
5:19
different options right here uh First
5:22
Option will be for JavaScript you can
5:24
include all the
5:26
languages so if you are doing it so I'm
5:28
just showing you the basic
5:32
options which it supports a JavaScript
5:37
HTML it supports all the languages you
5:40
can check the
5:45
docs in this way you can include the
5:53
options all the majors languages are
5:56
supported such as PHP Java everything so
6:00
now you can have these options so it
6:02
will have this drop down here you can
6:04
select your
6:08
language and in the similar way we will
6:11
have another select list where we will
6:14
allow the user to Simply select their
6:17
theme so here the user will simply
6:19
select which theme that they want to
6:21
select select
6:24
theme give it an ID Here theme
6:28
select so here prism supports various
6:31
themes the default theme is prism so
6:35
default theme will be
6:39
selected then we have the second them
6:41
prism Co so you can check out the prism
6:46
documentation to find out all the themes
6:48
that prism supports so I will show you
6:50
the basic ones prism Dark
6:54
theme and prism funky team
7:02
and
7:04
prism
7:18
Twilight so these are different themes
7:21
out there theme select drop drop down
7:25
and after that we will have a simple
7:28
button which will simply say that
7:31
uh format code so once you click this
7:35
button you'll have BTM BTM primary
7:38
bootstrap class you give it an ID here
7:41
of format button and
7:44
now after this button we will also
7:48
be showing the formatted code below it
7:51
so you will have h2
7:55
tag you will simply say that this is
7:58
your formatted code
8:00
we will be showing that output in the
8:02
text area soorry pre- tag we will give
8:05
it an ID here of formatted
8:09
code I give it a class here of language
8:16
JavaScript so it contains prism contains
8:19
various classes one such class if you
8:21
want to highlight JavaScript code then
8:24
you write language followed by the
8:25
language name so here we are
8:27
highlighting JavaScript code so you need
8:29
to give this uh class here this is
8:31
important if you want to highlight it
8:33
using prism JS so after you do this
8:37
inside your pre- tag you need to have
8:39
the code
8:40
tag this is a code tag just initialize
8:44
this code tag right here in order to
8:47
highlight the
8:49
code so after this we will now be
8:54
writing the custom JavaScript code in a
8:58
different file so we have will
8:59
initialize
9:00
script.js so here you'll be writing the
9:03
code so first of all we will Target the
9:06
button so when we click that format
9:09
button format code button this event
9:12
handler will trigger and this call back
9:14
function will
9:16
execute and you will basically get all
9:18
the text which the user has submitted in
9:21
the code input field like this we'll get
9:25
the
9:26
value and also we will get the language
9:29
that the user has
9:30
selected again using get element by
9:36
ID we're given an ID here language
9:39
select do value so after getting the
9:42
language as
9:44
well now we can simply highlight the
9:47
code using
9:49
prism so we need to get the reference of
9:52
that element in which we need to
9:55
highlight so formatted
9:58
code after getting the reference you can
10:01
simply use that element and give a class
10:06
name dynamically to it so the same class
10:11
that I showed you the language followed
10:14
by the language which is selected by the
10:18
user it can be any language JavaScript
10:21
PHP any language so prism has predefined
10:24
classes language Dash followed by the
10:27
actual language so here we are
10:29
dynamically attaching this class and
10:32
then we have formatted code
10:36
element query selector and we will look
10:39
for this element code that we
10:41
initialized inside this preag and we
10:45
will manipulate the text content which
10:47
is to be code input so if you make this
10:49
change right
10:51
here by default language JavaScript is
10:54
selected if you write some JavaScript
10:55
code let's suppose I declare two
10:57
variables
10:59
let Y is equal to 1 this is Javascript
11:01
code click on that you will actually see
11:05
the code will not be
11:07
highlighted because it is just showing
11:09
this code as it is it is not
11:11
highlighting it now for highlighting
11:13
this code we do need to write a single
11:15
line of
11:17
code for
11:21
highlighting the code using
11:24
prism this line is important which is we
11:27
will initialize the prism libr
11:30
and it contains a function which is
11:33
highlight
11:35
element and here you need to pass your
11:37
element formatted code element do query
11:41
selector code so what does it will do it
11:44
will highlight this
11:47
code by using
11:50
prism so now if you declare your code
11:53
write any JavaScript
11:56
code click on format code
12:00
you will see now it is being
12:04
highlighted let's suppose now if I
12:07
submit JavaScript code instead of or
12:11
HTML
12:17
code so let me submit
12:21
this change this to
12:24
HTML so now you can see my code is
12:27
highlighting
12:29
I can change the theme but it will not
12:32
be working for now for the themes to
12:35
work we need to bind a onchange event
12:39
handler so when the user basically
12:41
changes the theme from the drop down you
12:44
will find
12:46
a event handler to it so theme select we
12:51
have given that that ID to it so we'll
12:54
add a event listener so when the theme
12:57
changes this event will
13:00
fire and we will get the value of the
13:03
theme selected by e. target. value and
13:07
then we will need to get the stylesheet
13:10
every theme has a particular stylesheet
13:13
attached to it and now we need to get
13:15
that stylesheet theme so we have given
13:19
that
13:20
uh theme an ID in the HTML if you see
13:35
everything we have given this ID which
13:38
is theme select so we are just targeting
13:41
this select Here theme select
14:01
okay
14:02
for this theme Styles sheet if you see
14:07
when whenever we
14:10
pasted here you can see we have given
14:12
this ID Here theme stylesheet so
14:15
whenever we pasted the CDN of the CSS
14:18
part of that prism JS Library you can
14:21
see we have pasted the CSS and we are
14:23
given this element and ID Here theme
14:25
stylesheet so we are just targeting this
14:29
in the
14:34
JavaScript so inside
14:37
this we will
14:39
manipulate the theme stylesheet Source
14:43
parameter HF we will load that theme
14:50
automatically using this CDN link cdnjs
14:54
Cloud
14:56
fair.com Ajax lips SL prism and every
15:02
theme has a stylesheet file attached to
15:04
it so it has themes slash and here you
15:09
will provide dynamically the theme name
15:12
followed by main. CSS that's all so now
15:16
as the user selects a particular theme
15:19
that stylesheet will be fetched
15:21
automatically using that JavaScript code
15:24
so let's suppose if I want to highlight
15:25
the HTML
15:27
code I paste this code in the text area
15:30
then I select HTML click on format so
15:34
now you can see the highlighting starts
15:36
if I change the
15:41
theme uh let me see what is
15:52
there I think some typo mistake has
15:55
happened let me copy paste this
16:18
so if I want to highlight the ja
16:20
JavaScript code I will paste it click on
16:23
format code the highlighting starts if I
16:26
change the theme you will see the themes
16:29
will change right here we have different
16:31
themes so you can see that so if you see
16:35
the alignment is not proper this is due
16:37
to the fact that we need to add a simple
16:39
stylesheet code
16:42
here just to make sure that the code is
16:44
aligning properly you need to just write
16:48
this a custom stylesheet true you need
16:51
to Target the pre tag and just change
16:55
one property right here which is
16:57
Overflow and just make it Auto so it
17:00
will make sure that the code that you
17:03
submit is formatted properly and now you
17:07
can see
17:13
that you can select
17:21
any so you can go to the official
17:24
website here of prism and you can check
17:27
out the full full documentation full
17:30
example full list of themes which it
17:32
supports it also has plugins as well
17:34
third party plugins that you can
17:36
integrate such as the line numbers you
17:39
can also show uh line highlight specific
17:43
lines that you want to highlight so it's
17:45
a pretty big Library it can't be covered
17:48
in a single video so I just want to show
17:50
you uh the basic concepts related to
17:53
prism in this video so you can check out
17:57
their official
17:59
documentation and do check out the free
18:02
mediat tools.com website which contains
18:05
thousands of free tools related to audio
18:07
video and
18:09
image and please hit that like button
18:11
subscribe the channel and I will be
18:13
seeing you in the next one
#Programming
#Scripting Languages