videocam_off
This livestream is currently offline
Check back later when the stream goes live
Up next in 10
Build a Vue.js 3 Word & Text Annotation Highlighter Component Using vue-highlight-words in TS
Jan 13, 2025
Get the full source code of application here:
https://codingshiksha.com/vue/build-a-vue-js-3-word-text-highlighter-component-in-browser-using-vue-highlight-words-in-ts/
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 a vuejs 3
0:06
text highlighter plugin where if you
0:09
have a bunch of text that you want to
0:11
highlight something in that text so this
0:14
plugin will be very much helpful so you
0:15
can see the demo on the screen we have a
0:18
sentex sentence right here and we are
0:21
highlighting the words using a blue
0:24
background so these in this yellow
0:28
background and blue background as well
0:30
you can change and look customize the
0:33
highlighting color as well you can
0:34
annotate the text so the package which
0:38
is responsible for this is view
0:41
highlight words so you just need to go
0:46
to npmjs.com just search for this
0:50
package view
0:52
highlight words so this is actually the
0:56
name of the
0:58
package so I already installed it the
1:01
command is
1:03
simple uh it's almost having 10,000
1:05
weekly downloads so all the source codes
1:08
will be given in the description of the
1:10
video so now to get started you need to
1:12
go to your app. view file and right here
1:16
we will write the template and then we
1:20
write the typescript code in the script
1:21
tab so for this we do need to import
1:25
this package using the import statement
1:27
so we just write import highlighter
1:32
and this will be coming from view
1:35
highlight
1:37
words so we import this package and then
1:39
we need to export this plug-in the name
1:42
of the plugin so name of the component
1:45
is app and here we need to include this
1:49
components as a third party plug-in so
1:52
inside this object we need to include
1:54
this plugin which is
1:56
highlighter and then whatever data that
1:58
you want to supply to this so in this we
2:02
will have a simple
2:05
variable which will be any text any
2:08
sentence you can choose so this will be
2:12
your text that needs to be highlighted
2:15
and the second property here will be the
2:17
words so this will be the second
2:20
variable so the number of words that you
2:22
want to highlight in this sentence so
2:24
you can pick any words so this is your
2:26
sentence and whichever words you want to
2:29
highlight let's suppose I want to
2:30
highlight this word
2:32
chasing so I will simply mention
2:34
multiple words by space but in this case
2:38
I only want to highlight this chasing
2:40
word here with a annotate it
2:45
so now we come to the template part so
2:49
wherever you need to embed this we
2:50
simply say say here inside the div
2:53
section we give it an ID here ha and we
2:56
embed this component highlighter and it
2:59
actually take some
3:03
parameters so first of all it takes is
3:06
the class here which will be my
3:09
highlight if you want to change or some
3:12
properties you can style it using this
3:16
class and then it has a attribute of
3:21
style so here you can specify which
3:24
color of annotation that you want so I
3:27
want the blue color so I will say blue
3:32
and then it also contains this highlight
3:35
class
3:37
name which is a built-in
3:42
class and here you need to provide which
3:45
words you want to highlight so in this
3:49
we are looking forward to the keywords
3:52
variable that we have if you see
4:01
the keywords is actually computed
4:04
property so right here we need to
4:07
compute this property so we write this
4:10
in the computed object so keywords and
4:14
it's a computed property so here we'll
4:16
be returning this. words and we'll split
4:22
this so This simply is required whenever
4:25
you have multiple words but in this case
4:27
we only have a single word so this is
4:30
not
4:31
necessary so if you refresh it just try
4:34
to look at the result we do need to
4:37
mention the actual word that you want to
4:40
highlight so we can mention this using
4:43
this property which is which text you
4:45
want to
4:47
highlight so we will be mentioning the
4:50
text variable that we
4:54
declared so if you refresh now what
4:58
happens right here if you see
5:00
the sentence is in blue but now the
5:03
highlighting is in you can see this is
5:06
the yellow the word has been highlighted
5:11
annotated so in this way you can do this
5:14
highlighting let's suppose I want to
5:16
change this color to
5:19
Black so the sentence is now in black
5:22
but the highlighting remains in
5:25
yellow so you can even change this
5:28
highlighting color as well so so there
5:30
is this highlight class given you can
5:33
just write some custom
5:35
stylesheet so just Target this class
5:39
which is highlight if you want to change
5:42
let's suppose this yellow color I want a
5:46
green highlighting color so I Target
5:48
this class
5:53
so it will add this
5:56
background or I think it's called as my
6:05
highlight so you can you can check out
6:07
their documentation it's a very nice
6:11
plugin and the thing is that you can
6:13
even choose multiple words so let's
6:16
suppose I also want to
6:19
highlight uh the word so the is
6:22
appearing multiple times here also here
6:25
also so I will say I want to highlight
6:29
the as
6:30
D so now if you see it is highlighting
6:34
multiple words of so occurrences of the
6:38
here also here
6:39
also so if you have a large amount of
6:43
text and if you want to annotate or
6:44
highlight some kind of words you can use
6:46
this plugin in VJs 3 so thank you very
6:49
much guys for watching this video and do
6:51
check out my website as well uh free
6:54
mediat tools.com uh which contains
6:57
thousands of tools regarding audio video
7:00
and image and I will be seeing you guys
7:03
in the next video