In this video, we're going to add in one last little feature, or I should really say fix up one very
small thing inside of our Ed.
So right now, if I write out some code, it is very clear that we are getting some syntax highlighting.
I see some different colors for every one of these words.
It just helps us understand the code that we are writing out here.
I'm going to replace this, however, with a very small react component.
And I think you'll notice something a little bit strange very quickly.
It's going to define some kind of AB component that's going to return a div inside there.
I will place in H one.
With some text after that, I'm going to place a button that also has some text and maybe a prop that
provides an unclick function or something like that inside there, I'll do a console log.
So what this gists does or what this component does not really relevant what is relevant, I want you
to notice I think you'll see it very quickly.
We are getting almost zero syntax highlighting inside of here.
And the syntax highlighting that we have is a little bit inconsistent.
For example, right here, it says click and that is highlighted, but not the word me.
So here's an unfortunate reality of the Monaco Ed.
The Monaco editor understands what jazz is.
It is able to pass it.
It understands that it is some form of JavaScript code.
And we know that's the case because, well, we're not getting any kind of highlighting here or any
error saying, hey, this is an invalid token or something like that.
So all the though the Monaco editor knows what Jesus is, it does not apply syntax highlighting to it.
So we're going to fix that up inside this video.
Having said that, this video is optional.
You do not have to go through this process.
The reason that fixing up the syntax, highlighting stuff is going to be optional is that we're going
to be making use of an outside third party package that is not very well tested.
So we're gonna use a package that might very well break at some point in time.
It is not an official Monaco ed package.
So who knows if this is going to break at some point in time, the future or what?
In addition, the code that we're going to write out to work with this package is going to be a little
bit strange as well.
So, again, this video is optional.
If you do not want to apply syntax highlighting no problem whatsoever, just this video, continue on
to the next one.
Otherwise, stick around and let's get to it.
OK, so first thing we need to do is install a couple of different packages.
I'm going to go back over to my terminal inside of my book project directory.
I'll do an install.
We're going to do a save exact just to make sure we're using the exact same version of this module,
because, again, it might break at some point in time.
Total disclosure here.
And we're going to install Monaco gists highlighter at zero zero one five.
We're also going to install just code shift at zero one one zero and then finally at Type's James code
shift at zero seven to.
I'll zoom in just a little bit so you can see all that stuff very easily.
OK, I'm going to run that, as you'll notice, we are getting three different packages here.
In reality, one is just a type definition file for another.
So it's really just two packages that we are installing.
So Monegasques highlighter is the package that is going to actually attempt to apply some highlighting
to the ex that we write inside that editor, but that package doesn't actually understand or know how
to find inside of our code.
So internally, it uses another package called JS Code Shift.
JS code shift is going to be responsible for parsing all the JavaScript code that we write and finding
all the little segments of all the different props inside there and stuff like that.
JS code shift will then tell the Monegasques highlighter where all the little segments of jousts are,
and then it will be up to that deists highlighter to actually apply the highlighting stuff itself.
So just a little bit of backstory on what is going on here.
OK, I'm going to flip back over to my code editor component, I'm going to import both those packages
that we just installed.
I'm going to get a code shift from just code shift.
And my lighter.
From Monaco, I later and right away, we're going to see an air message coming from TypeScript around
this airport and it's complaining that there is no tight definition file for this module.
Remember, type definition files are actually authored by other engineers in the community.
So in the case of this package, it's not a very large or popular package.
They're just plain is not any type definition files for it.
There are no type definition files we can ever install, at least at the time I'm recording this video.
So we need to essentially override typescript here and say, hey, look, we're sorry, but there is
no type definition file for this.
There won't be any and we don't really want to write any ourselves right now.
So it's kind of override type script we're going to write out to declare module Monaco jousts highlighter
and that will make notes are we are not going to write it inside of here.
We're going to write it inside of a separate file is just an example of what we're going to write.
This is going to be essentially tell script that we want to declare some kind of like imaginary module
that has some values inside of it, but don't actually sweat what values actually are inside there.
So we're going to take this statement and we're going to move it into another file instead of a project
in the SC directory.
I'm going to make a new file called Type's D that's.
And then I'll move that little declare module.
Over there.
I'll then save both these files.
And then back inside of our code editor now, that error message has gone away.
OK, so that fixes that up, but like I said, a little bit of strange code to actually get this stuff
working, the next up we're going to go into on Ed did mount right after our model right here.
We're going to do the setup or just code shift and this highlighter thing as well.
And again, there's going to be some weird or strange code inside of your.
At the bottom of this function, we're going to add in CONSED highlighter is new highlighter.
We're going to provide a couple of different configuration options to this thing.
First, we're going to provide a reference to the Monica editor.
Now, let me give you a little bit of backstory here, because this is where things start to get a little
bit weird.
Like I mentioned, whenever we start to run the Monaco editor inside of our browser, it's going to
automatically add a property to the global window object.
So at my console, I can do a window dot Monaco.
This is essentially a reference to the Monaco Library itself.
It is not a direct reference to the editor that we were showing on the screen.
Right now we have to provide this as the first argument to that highlighter thing.
Unfortunately, TypeScript is not aware that we are currently really loading up Monaco inside the browser.
And so if we write out.
Window Monaco right here, typescript, is going to start to throw an error message and say, hey,
Monaco is not a property on the global window object.
So right now, because, well, we're just kind of going through this video very quickly and just very
quickly trying to set up all this all this highlighter stuff.
We're just going to tell TypeScript to not sweat it.
We're going to tell TypeScript, do not try to type check this line.
Just ignore this little thing right here.
It's going to put a comment right above and add in at times ignore.
And that pretty much means do not try to type check the next line of code.
Then as a second argument, we'll put in that code shift library and then finally a reference to the
Monaco editor, for instance, that we have created to remember we are currently working side of on
Ed did mount.
The second argument to it is a reference to the instance of the ED that we are currently showing on
the screen.
And that's what we are providing as the third argument right here.
OK, so now we've created this highlighter.
Here's where the kind of second part of slightly strange code is going to come in.
We're going to add in highlighter dot light on did change model content like so.
That essentially means whenever the contents of the ED changes in some way just to try to apply some
syntax highlighting to it.
So let's save this as it stands right now.
I'm going to go back over refresh.
Taking a little bit of time to refresh right now, probably because it's bundling and all that jazz
Kotcheff stuff, but eventually there we go.
So right away we're going to see a little bit of a nasty message start to appear.
And you know what?
That's because I misspelt.
But here's kind of step one, I guess, of something weird about this library highlight is actually
supposed to be capitalized.
So the right there to be capital L so high capital light capital on did change model content.
Let's try that again.
So now it works, not going to once again start to write out a react component, and as I do, you're
going to notice some weird stuff coming out of my console.
I'm going to put in a map and you'll notice we start getting a lot of error messages right away.
So once again, this package we are using maybe not the best thing in the world, unfortunately, as
it starts to try to apply syntax highlighting to all this stuff with every single key press, it tries
to read and pass our code and apply that syntax highlighting.
At some point in time, as it tries to pass our code, we are going to be writing out invalid JavaScript
on the screen.
So, for example, if I put in just this right here, this is invalid JavaScript.
Nonetheless, this library is going to attempt to pass our code.
And naturally, it's going to say, hey, sorry, but like you do not have valid JavaScript code right
now.
And again, unfortunately, with every one of these kind of invalid key presses that we have that are
always going to occur because the user has to write up code at some point in time, it's going to try
to log an error message.
This is not throwing in there.
This is just console logging an error.
Nonetheless, it is still obviously pretty darn undesirable.
We do not want to see a ton of console logs go by here every single time.
We just start to write out some code.
So to fix us up, we're going to go and write out once again just a little bit of weird code here.
We're going to add in a couple of different arguments to this thing.
So if you do a command, well, we can't do a command click on it because we don't have any type definition
files for it, but this function takes a couple of different arguments.
The third argument is a function or an object that we can use to customize how this thing prints out
error messages if any errors occur while it is parsing our code.
So.
Well, without further ado, let's just ride out the weird code, get this thing working, we're going
to put in an empty arrow function as the first argument, an empty arrow function as a second undefined
and then once again, an empty arrow function.
So all this stuff right here is just about making sure that this highlighter stuff does not attempt
to console log out all these errors that start to occur.
All these different functions are essentially substitutions for the internal logging that the highlighter
library is trying to do.
So whenever some air occurs or tries to do some logging or stuff like that, it's going to call these
empty functions with obviously not going to do anything with them.
We're going to save this look back over refresh.
And now if we start typing out.
We are not getting any of those really crazy air messages appearing.
But as we start to write out our code, we'll very quickly start to see, hey, look at that, we actually
are now getting some syntax highlighting.
So I can put in my H1.
Here is my one element.
And my unclick.
So definitely easier to read than what we had before, we had no syntax highlighting whatsoever.
So this definitely is good, but nonetheless, on these colors like that orange right there just doesn't
really jive with our overall theme for our application.
In addition, the actual text of our elements themselves just a little bit dark with this kind of darker
background.
So if we have text like this large, I don't know about you, but reading these six elements is still
kind of challenging for me.
So I would like to even go one step further.
And I just want to kind of customize some of the different colors for all these different things right
here in order to customize the syntax highlighting, we can apply a little bit of custom success.
So let me show you what I mean.
I'm going to find my element Specter.
I'm going to go to one of those just elements and click on it.
So this is how I mean, this is how code highlighting is done inside of your browser.
It's going to actually take all these different characters and wrap them with different elements and
then apply some styling to each individual element.
So right now, if I inspect each one right there, you'll notice that the one there's the texture,
that one right there has been wrapped with a span that has a couple of different classes applied to
it.
And these different classes are what are going to actually apply the different colors.
So, for example, if we ever have a span with the class of Imtech, one or one, that is going to get
a color of royal blue.
So if we want to customize how different things get kind of colored inside of here, we can just write
out some custom S.O.S that says find the class name, make one on one or whatever else, and don't use
the color of royal blue, use the color of, I don't know, red or something else.
That's all we really have to do here, we just need to add in a little bit of custom CSFs to change
what colors these different classes are going to try to apply.
Now, in total, the amount of access that we need to write out to do all this stuff is fairly extensive.
There's actually going to be a pretty good amount of access.
I want to write to fix all the syntax highlighting.
So rather than having you and I sit here and spend like the next 20 minutes writing out all the CSFs,
we're going to instead pause a video right here.
In the next lecture.
You're going to see a file that you can download.
You're going to download that access file and you're going to add it into your project.
And I'll give you some instructions in there in how to on how to do it.
Essentially, all you have to do is download all that success.
You're going to create a new file inside of your components directory and call it syntax.
That's CSFs.
And then inside there, you're going to paste all the costs that I'm going to give you, so until it's
about a hundred and thirty eight lines or so.
So this is all stuff you'll find in the next text lecture.
You can then import all this.
Into our Hoad ed component.
Syntax, yes, I'm going to save that and now if I flip back over.
And write out that component again, we're going to see just a little bit different syntax highlighting.
So in particular, the elements are not quite so dark anymore.
You can also optionally change the orange color here.
I thought I'd change the orange, but evidently I didn't.
I don't really like this orange that much.
So I might give you a slightly different version of all this stuff than what I have just to make those
brackets not quite so awful.
Maybe we'll do a like a nice blue like that or something.
That would be a little bit better, so if I want to change that one, I would change the A.K. one hundred
and find that one really quick.
Imtech one hundred.
You're going to change that one right there.
OK, so now that should be just a little bit better than what it was before.
Mido.
Oh, come on.
Yeah, that's just a little bit better for the.
So we'll go with that blue.
But again, if you want to change, any of the stuff I've got to do is open up this syntax nauseousness
file and change these different class names to whatever colors you want to use for your particular project.
OK, so I apologize for the very long video here, but as I mentioned, some of the stuff was just a
little bit strange, so I wanted to make it all optional.
Hopefully you've got some better syntax highlighting being applied.
Let's take a pause right now and move on in the next video.