1
00:00:01,100 --> 00:00:05,510
In this video, we're going to add in one last little feature, or I should really say fix up one very

2
00:00:05,510 --> 00:00:07,010
small thing inside of our Ed.

3
00:00:07,330 --> 00:00:12,590
So right now, if I write out some code, it is very clear that we are getting some syntax highlighting.

4
00:00:12,890 --> 00:00:15,320
I see some different colors for every one of these words.

5
00:00:15,320 --> 00:00:17,990
It just helps us understand the code that we are writing out here.

6
00:00:18,790 --> 00:00:22,360
I'm going to replace this, however, with a very small react component.

7
00:00:22,370 --> 00:00:24,770
And I think you'll notice something a little bit strange very quickly.

8
00:00:25,340 --> 00:00:30,940
It's going to define some kind of AB component that's going to return a div inside there.

9
00:00:31,790 --> 00:00:32,990
I will place in H one.

10
00:00:34,820 --> 00:00:42,050
With some text after that, I'm going to place a button that also has some text and maybe a prop that

11
00:00:42,050 --> 00:00:47,090
provides an unclick function or something like that inside there, I'll do a console log.

12
00:00:47,980 --> 00:00:52,540
So what this gists does or what this component does not really relevant what is relevant, I want you

13
00:00:52,540 --> 00:00:54,370
to notice I think you'll see it very quickly.

14
00:00:54,490 --> 00:00:57,730
We are getting almost zero syntax highlighting inside of here.

15
00:00:57,910 --> 00:01:01,540
And the syntax highlighting that we have is a little bit inconsistent.

16
00:01:01,840 --> 00:01:05,480
For example, right here, it says click and that is highlighted, but not the word me.

17
00:01:06,340 --> 00:01:09,190
So here's an unfortunate reality of the Monaco Ed.

18
00:01:09,430 --> 00:01:12,370
The Monaco editor understands what jazz is.

19
00:01:12,370 --> 00:01:13,360
It is able to pass it.

20
00:01:13,360 --> 00:01:16,900
It understands that it is some form of JavaScript code.

21
00:01:17,650 --> 00:01:21,280
And we know that's the case because, well, we're not getting any kind of highlighting here or any

22
00:01:21,280 --> 00:01:24,430
error saying, hey, this is an invalid token or something like that.

23
00:01:24,820 --> 00:01:30,610
So all the though the Monaco editor knows what Jesus is, it does not apply syntax highlighting to it.

24
00:01:31,100 --> 00:01:32,750
So we're going to fix that up inside this video.

25
00:01:33,220 --> 00:01:35,590
Having said that, this video is optional.

26
00:01:35,740 --> 00:01:37,830
You do not have to go through this process.

27
00:01:38,140 --> 00:01:42,100
The reason that fixing up the syntax, highlighting stuff is going to be optional is that we're going

28
00:01:42,100 --> 00:01:47,740
to be making use of an outside third party package that is not very well tested.

29
00:01:48,160 --> 00:01:52,030
So we're gonna use a package that might very well break at some point in time.

30
00:01:52,060 --> 00:01:54,640
It is not an official Monaco ed package.

31
00:01:54,910 --> 00:01:58,170
So who knows if this is going to break at some point in time, the future or what?

32
00:01:58,570 --> 00:02:02,350
In addition, the code that we're going to write out to work with this package is going to be a little

33
00:02:02,350 --> 00:02:03,560
bit strange as well.

34
00:02:04,180 --> 00:02:05,830
So, again, this video is optional.

35
00:02:05,830 --> 00:02:10,630
If you do not want to apply syntax highlighting no problem whatsoever, just this video, continue on

36
00:02:10,630 --> 00:02:11,230
to the next one.

37
00:02:11,510 --> 00:02:13,540
Otherwise, stick around and let's get to it.

38
00:02:14,600 --> 00:02:18,290
OK, so first thing we need to do is install a couple of different packages.

39
00:02:18,800 --> 00:02:22,100
I'm going to go back over to my terminal inside of my book project directory.

40
00:02:22,340 --> 00:02:23,530
I'll do an install.

41
00:02:24,200 --> 00:02:29,120
We're going to do a save exact just to make sure we're using the exact same version of this module,

42
00:02:29,120 --> 00:02:31,250
because, again, it might break at some point in time.

43
00:02:31,260 --> 00:02:32,570
Total disclosure here.

44
00:02:33,200 --> 00:02:41,510
And we're going to install Monaco gists highlighter at zero zero one five.

45
00:02:42,720 --> 00:02:51,960
We're also going to install just code shift at zero one one zero and then finally at Type's James code

46
00:02:51,960 --> 00:02:55,380
shift at zero seven to.

47
00:02:56,860 --> 00:02:59,470
I'll zoom in just a little bit so you can see all that stuff very easily.

48
00:03:00,450 --> 00:03:04,440
OK, I'm going to run that, as you'll notice, we are getting three different packages here.

49
00:03:04,440 --> 00:03:07,530
In reality, one is just a type definition file for another.

50
00:03:07,900 --> 00:03:10,170
So it's really just two packages that we are installing.

51
00:03:11,550 --> 00:03:16,950
So Monegasques highlighter is the package that is going to actually attempt to apply some highlighting

52
00:03:16,950 --> 00:03:22,170
to the ex that we write inside that editor, but that package doesn't actually understand or know how

53
00:03:22,170 --> 00:03:23,970
to find inside of our code.

54
00:03:24,360 --> 00:03:28,410
So internally, it uses another package called JS Code Shift.

55
00:03:28,770 --> 00:03:34,080
JS code shift is going to be responsible for parsing all the JavaScript code that we write and finding

56
00:03:34,080 --> 00:03:38,250
all the little segments of all the different props inside there and stuff like that.

57
00:03:38,910 --> 00:03:45,210
JS code shift will then tell the Monegasques highlighter where all the little segments of jousts are,

58
00:03:45,420 --> 00:03:49,950
and then it will be up to that deists highlighter to actually apply the highlighting stuff itself.

59
00:03:50,790 --> 00:03:53,520
So just a little bit of backstory on what is going on here.

60
00:03:54,470 --> 00:04:00,230
OK, I'm going to flip back over to my code editor component, I'm going to import both those packages

61
00:04:00,230 --> 00:04:01,670
that we just installed.

62
00:04:02,480 --> 00:04:07,280
I'm going to get a code shift from just code shift.

63
00:04:10,030 --> 00:04:11,800
And my lighter.

64
00:04:12,870 --> 00:04:19,230
From Monaco, I later and right away, we're going to see an air message coming from TypeScript around

65
00:04:19,230 --> 00:04:24,020
this airport and it's complaining that there is no tight definition file for this module.

66
00:04:24,600 --> 00:04:28,850
Remember, type definition files are actually authored by other engineers in the community.

67
00:04:29,190 --> 00:04:33,030
So in the case of this package, it's not a very large or popular package.

68
00:04:33,040 --> 00:04:36,390
They're just plain is not any type definition files for it.

69
00:04:36,580 --> 00:04:41,490
There are no type definition files we can ever install, at least at the time I'm recording this video.

70
00:04:42,030 --> 00:04:46,590
So we need to essentially override typescript here and say, hey, look, we're sorry, but there is

71
00:04:46,590 --> 00:04:48,390
no type definition file for this.

72
00:04:48,600 --> 00:04:52,020
There won't be any and we don't really want to write any ourselves right now.

73
00:04:52,620 --> 00:05:00,360
So it's kind of override type script we're going to write out to declare module Monaco jousts highlighter

74
00:05:01,080 --> 00:05:04,410
and that will make notes are we are not going to write it inside of here.

75
00:05:04,410 --> 00:05:07,740
We're going to write it inside of a separate file is just an example of what we're going to write.

76
00:05:08,040 --> 00:05:12,630
This is going to be essentially tell script that we want to declare some kind of like imaginary module

77
00:05:12,810 --> 00:05:17,340
that has some values inside of it, but don't actually sweat what values actually are inside there.

78
00:05:17,940 --> 00:05:22,320
So we're going to take this statement and we're going to move it into another file instead of a project

79
00:05:22,980 --> 00:05:24,540
in the SC directory.

80
00:05:24,570 --> 00:05:29,190
I'm going to make a new file called Type's D that's.

81
00:05:31,070 --> 00:05:33,140
And then I'll move that little declare module.

82
00:05:34,150 --> 00:05:34,750
Over there.

83
00:05:35,780 --> 00:05:37,160
I'll then save both these files.

84
00:05:38,740 --> 00:05:41,940
And then back inside of our code editor now, that error message has gone away.

85
00:05:44,220 --> 00:05:48,600
OK, so that fixes that up, but like I said, a little bit of strange code to actually get this stuff

86
00:05:48,600 --> 00:05:55,370
working, the next up we're going to go into on Ed did mount right after our model right here.

87
00:05:55,410 --> 00:05:59,890
We're going to do the setup or just code shift and this highlighter thing as well.

88
00:05:59,910 --> 00:06:03,150
And again, there's going to be some weird or strange code inside of your.

89
00:06:04,470 --> 00:06:10,440
At the bottom of this function, we're going to add in CONSED highlighter is new highlighter.

90
00:06:11,650 --> 00:06:14,510
We're going to provide a couple of different configuration options to this thing.

91
00:06:14,920 --> 00:06:17,720
First, we're going to provide a reference to the Monica editor.

92
00:06:17,980 --> 00:06:22,180
Now, let me give you a little bit of backstory here, because this is where things start to get a little

93
00:06:22,180 --> 00:06:22,660
bit weird.

94
00:06:22,690 --> 00:06:27,460
Like I mentioned, whenever we start to run the Monaco editor inside of our browser, it's going to

95
00:06:27,460 --> 00:06:30,760
automatically add a property to the global window object.

96
00:06:31,270 --> 00:06:34,680
So at my console, I can do a window dot Monaco.

97
00:06:35,380 --> 00:06:38,790
This is essentially a reference to the Monaco Library itself.

98
00:06:39,070 --> 00:06:42,130
It is not a direct reference to the editor that we were showing on the screen.

99
00:06:42,130 --> 00:06:46,440
Right now we have to provide this as the first argument to that highlighter thing.

100
00:06:46,840 --> 00:06:52,890
Unfortunately, TypeScript is not aware that we are currently really loading up Monaco inside the browser.

101
00:06:53,170 --> 00:06:54,250
And so if we write out.

102
00:06:55,980 --> 00:07:01,110
Window Monaco right here, typescript, is going to start to throw an error message and say, hey,

103
00:07:01,110 --> 00:07:04,080
Monaco is not a property on the global window object.

104
00:07:04,720 --> 00:07:08,670
So right now, because, well, we're just kind of going through this video very quickly and just very

105
00:07:08,670 --> 00:07:10,980
quickly trying to set up all this all this highlighter stuff.

106
00:07:11,340 --> 00:07:13,530
We're just going to tell TypeScript to not sweat it.

107
00:07:13,740 --> 00:07:16,560
We're going to tell TypeScript, do not try to type check this line.

108
00:07:16,560 --> 00:07:18,330
Just ignore this little thing right here.

109
00:07:18,650 --> 00:07:22,620
It's going to put a comment right above and add in at times ignore.

110
00:07:23,160 --> 00:07:26,280
And that pretty much means do not try to type check the next line of code.

111
00:07:28,330 --> 00:07:34,090
Then as a second argument, we'll put in that code shift library and then finally a reference to the

112
00:07:34,420 --> 00:07:40,000
Monaco editor, for instance, that we have created to remember we are currently working side of on

113
00:07:40,000 --> 00:07:40,900
Ed did mount.

114
00:07:41,050 --> 00:07:45,970
The second argument to it is a reference to the instance of the ED that we are currently showing on

115
00:07:45,970 --> 00:07:46,480
the screen.

116
00:07:46,720 --> 00:07:49,210
And that's what we are providing as the third argument right here.

117
00:07:51,530 --> 00:07:53,300
OK, so now we've created this highlighter.

118
00:07:53,570 --> 00:07:57,230
Here's where the kind of second part of slightly strange code is going to come in.

119
00:07:58,170 --> 00:08:06,510
We're going to add in highlighter dot light on did change model content like so.

120
00:08:07,640 --> 00:08:13,520
That essentially means whenever the contents of the ED changes in some way just to try to apply some

121
00:08:13,520 --> 00:08:14,690
syntax highlighting to it.

122
00:08:15,600 --> 00:08:17,390
So let's save this as it stands right now.

123
00:08:18,160 --> 00:08:19,870
I'm going to go back over refresh.

124
00:08:24,180 --> 00:08:28,590
Taking a little bit of time to refresh right now, probably because it's bundling and all that jazz

125
00:08:28,590 --> 00:08:31,230
Kotcheff stuff, but eventually there we go.

126
00:08:32,010 --> 00:08:36,390
So right away we're going to see a little bit of a nasty message start to appear.

127
00:08:37,080 --> 00:08:37,750
And you know what?

128
00:08:37,770 --> 00:08:39,000
That's because I misspelt.

129
00:08:39,480 --> 00:08:43,950
But here's kind of step one, I guess, of something weird about this library highlight is actually

130
00:08:43,950 --> 00:08:45,000
supposed to be capitalized.

131
00:08:45,000 --> 00:08:52,250
So the right there to be capital L so high capital light capital on did change model content.

132
00:08:52,860 --> 00:08:53,580
Let's try that again.

133
00:08:54,980 --> 00:09:00,200
So now it works, not going to once again start to write out a react component, and as I do, you're

134
00:09:00,200 --> 00:09:02,420
going to notice some weird stuff coming out of my console.

135
00:09:02,810 --> 00:09:07,930
I'm going to put in a map and you'll notice we start getting a lot of error messages right away.

136
00:09:08,390 --> 00:09:13,490
So once again, this package we are using maybe not the best thing in the world, unfortunately, as

137
00:09:13,490 --> 00:09:18,800
it starts to try to apply syntax highlighting to all this stuff with every single key press, it tries

138
00:09:18,800 --> 00:09:21,950
to read and pass our code and apply that syntax highlighting.

139
00:09:23,110 --> 00:09:28,000
At some point in time, as it tries to pass our code, we are going to be writing out invalid JavaScript

140
00:09:28,000 --> 00:09:28,650
on the screen.

141
00:09:29,050 --> 00:09:32,740
So, for example, if I put in just this right here, this is invalid JavaScript.

142
00:09:33,010 --> 00:09:36,130
Nonetheless, this library is going to attempt to pass our code.

143
00:09:36,250 --> 00:09:41,290
And naturally, it's going to say, hey, sorry, but like you do not have valid JavaScript code right

144
00:09:41,290 --> 00:09:41,560
now.

145
00:09:41,920 --> 00:09:47,110
And again, unfortunately, with every one of these kind of invalid key presses that we have that are

146
00:09:47,110 --> 00:09:51,310
always going to occur because the user has to write up code at some point in time, it's going to try

147
00:09:51,310 --> 00:09:52,780
to log an error message.

148
00:09:53,350 --> 00:09:54,570
This is not throwing in there.

149
00:09:54,610 --> 00:09:56,560
This is just console logging an error.

150
00:09:57,040 --> 00:10:00,730
Nonetheless, it is still obviously pretty darn undesirable.

151
00:10:00,880 --> 00:10:04,780
We do not want to see a ton of console logs go by here every single time.

152
00:10:04,780 --> 00:10:06,850
We just start to write out some code.

153
00:10:08,300 --> 00:10:13,070
So to fix us up, we're going to go and write out once again just a little bit of weird code here.

154
00:10:13,760 --> 00:10:16,400
We're going to add in a couple of different arguments to this thing.

155
00:10:17,770 --> 00:10:21,370
So if you do a command, well, we can't do a command click on it because we don't have any type definition

156
00:10:21,370 --> 00:10:24,600
files for it, but this function takes a couple of different arguments.

157
00:10:25,030 --> 00:10:30,490
The third argument is a function or an object that we can use to customize how this thing prints out

158
00:10:30,490 --> 00:10:34,120
error messages if any errors occur while it is parsing our code.

159
00:10:34,570 --> 00:10:34,930
So.

160
00:10:36,080 --> 00:10:40,340
Well, without further ado, let's just ride out the weird code, get this thing working, we're going

161
00:10:40,340 --> 00:10:47,060
to put in an empty arrow function as the first argument, an empty arrow function as a second undefined

162
00:10:47,510 --> 00:10:50,300
and then once again, an empty arrow function.

163
00:10:51,020 --> 00:10:56,780
So all this stuff right here is just about making sure that this highlighter stuff does not attempt

164
00:10:56,780 --> 00:10:59,630
to console log out all these errors that start to occur.

165
00:11:00,600 --> 00:11:05,370
All these different functions are essentially substitutions for the internal logging that the highlighter

166
00:11:05,370 --> 00:11:06,510
library is trying to do.

167
00:11:06,900 --> 00:11:11,670
So whenever some air occurs or tries to do some logging or stuff like that, it's going to call these

168
00:11:11,670 --> 00:11:15,540
empty functions with obviously not going to do anything with them.

169
00:11:16,970 --> 00:11:19,910
We're going to save this look back over refresh.

170
00:11:20,760 --> 00:11:22,290
And now if we start typing out.

171
00:11:23,290 --> 00:11:26,470
We are not getting any of those really crazy air messages appearing.

172
00:11:27,560 --> 00:11:32,930
But as we start to write out our code, we'll very quickly start to see, hey, look at that, we actually

173
00:11:32,930 --> 00:11:35,210
are now getting some syntax highlighting.

174
00:11:36,130 --> 00:11:38,170
So I can put in my H1.

175
00:11:39,210 --> 00:11:40,940
Here is my one element.

176
00:11:44,120 --> 00:11:45,410
And my unclick.

177
00:11:51,230 --> 00:11:56,330
So definitely easier to read than what we had before, we had no syntax highlighting whatsoever.

178
00:11:57,310 --> 00:12:03,430
So this definitely is good, but nonetheless, on these colors like that orange right there just doesn't

179
00:12:03,430 --> 00:12:05,980
really jive with our overall theme for our application.

180
00:12:06,130 --> 00:12:11,680
In addition, the actual text of our elements themselves just a little bit dark with this kind of darker

181
00:12:11,680 --> 00:12:12,250
background.

182
00:12:12,550 --> 00:12:18,250
So if we have text like this large, I don't know about you, but reading these six elements is still

183
00:12:18,250 --> 00:12:19,390
kind of challenging for me.

184
00:12:19,780 --> 00:12:22,180
So I would like to even go one step further.

185
00:12:22,180 --> 00:12:26,140
And I just want to kind of customize some of the different colors for all these different things right

186
00:12:26,140 --> 00:12:31,250
here in order to customize the syntax highlighting, we can apply a little bit of custom success.

187
00:12:31,760 --> 00:12:32,770
So let me show you what I mean.

188
00:12:33,290 --> 00:12:34,750
I'm going to find my element Specter.

189
00:12:34,970 --> 00:12:37,770
I'm going to go to one of those just elements and click on it.

190
00:12:38,440 --> 00:12:42,700
So this is how I mean, this is how code highlighting is done inside of your browser.

191
00:12:42,970 --> 00:12:47,890
It's going to actually take all these different characters and wrap them with different elements and

192
00:12:47,890 --> 00:12:50,140
then apply some styling to each individual element.

193
00:12:50,500 --> 00:12:54,970
So right now, if I inspect each one right there, you'll notice that the one there's the texture,

194
00:12:54,970 --> 00:12:59,410
that one right there has been wrapped with a span that has a couple of different classes applied to

195
00:12:59,410 --> 00:12:59,620
it.

196
00:13:00,010 --> 00:13:04,180
And these different classes are what are going to actually apply the different colors.

197
00:13:04,900 --> 00:13:10,540
So, for example, if we ever have a span with the class of Imtech, one or one, that is going to get

198
00:13:10,540 --> 00:13:12,120
a color of royal blue.

199
00:13:12,910 --> 00:13:17,560
So if we want to customize how different things get kind of colored inside of here, we can just write

200
00:13:17,560 --> 00:13:23,590
out some custom S.O.S that says find the class name, make one on one or whatever else, and don't use

201
00:13:23,590 --> 00:13:28,630
the color of royal blue, use the color of, I don't know, red or something else.

202
00:13:29,540 --> 00:13:33,830
That's all we really have to do here, we just need to add in a little bit of custom CSFs to change

203
00:13:34,070 --> 00:13:36,680
what colors these different classes are going to try to apply.

204
00:13:37,920 --> 00:13:43,000
Now, in total, the amount of access that we need to write out to do all this stuff is fairly extensive.

205
00:13:43,050 --> 00:13:45,220
There's actually going to be a pretty good amount of access.

206
00:13:45,250 --> 00:13:47,220
I want to write to fix all the syntax highlighting.

207
00:13:47,640 --> 00:13:52,560
So rather than having you and I sit here and spend like the next 20 minutes writing out all the CSFs,

208
00:13:52,830 --> 00:13:54,810
we're going to instead pause a video right here.

209
00:13:55,140 --> 00:13:56,460
In the next lecture.

210
00:13:56,460 --> 00:13:59,250
You're going to see a file that you can download.

211
00:13:59,700 --> 00:14:03,090
You're going to download that access file and you're going to add it into your project.

212
00:14:03,090 --> 00:14:05,790
And I'll give you some instructions in there in how to on how to do it.

213
00:14:06,150 --> 00:14:08,850
Essentially, all you have to do is download all that success.

214
00:14:09,300 --> 00:14:14,840
You're going to create a new file inside of your components directory and call it syntax.

215
00:14:15,090 --> 00:14:15,900
That's CSFs.

216
00:14:17,510 --> 00:14:21,440
And then inside there, you're going to paste all the costs that I'm going to give you, so until it's

217
00:14:21,440 --> 00:14:23,600
about a hundred and thirty eight lines or so.

218
00:14:24,290 --> 00:14:27,290
So this is all stuff you'll find in the next text lecture.

219
00:14:27,840 --> 00:14:29,240
You can then import all this.

220
00:14:30,130 --> 00:14:32,620
Into our Hoad ed component.

221
00:14:36,740 --> 00:14:41,990
Syntax, yes, I'm going to save that and now if I flip back over.

222
00:14:45,400 --> 00:14:49,110
And write out that component again, we're going to see just a little bit different syntax highlighting.

223
00:14:49,480 --> 00:14:53,600
So in particular, the elements are not quite so dark anymore.

224
00:14:54,190 --> 00:14:57,400
You can also optionally change the orange color here.

225
00:14:57,410 --> 00:15:00,330
I thought I'd change the orange, but evidently I didn't.

226
00:15:00,340 --> 00:15:02,170
I don't really like this orange that much.

227
00:15:02,500 --> 00:15:07,900
So I might give you a slightly different version of all this stuff than what I have just to make those

228
00:15:07,900 --> 00:15:09,990
brackets not quite so awful.

229
00:15:10,000 --> 00:15:12,930
Maybe we'll do a like a nice blue like that or something.

230
00:15:14,590 --> 00:15:19,660
That would be a little bit better, so if I want to change that one, I would change the A.K. one hundred

231
00:15:19,670 --> 00:15:20,980
and find that one really quick.

232
00:15:21,460 --> 00:15:23,920
Imtech one hundred.

233
00:15:24,190 --> 00:15:25,630
You're going to change that one right there.

234
00:15:26,830 --> 00:15:31,000
OK, so now that should be just a little bit better than what it was before.

235
00:15:32,090 --> 00:15:32,720
Mido.

236
00:15:35,570 --> 00:15:36,200
Oh, come on.

237
00:15:42,320 --> 00:15:43,820
Yeah, that's just a little bit better for the.

238
00:15:44,870 --> 00:15:45,920
So we'll go with that blue.

239
00:15:45,920 --> 00:15:49,760
But again, if you want to change, any of the stuff I've got to do is open up this syntax nauseousness

240
00:15:49,760 --> 00:15:54,590
file and change these different class names to whatever colors you want to use for your particular project.

241
00:15:55,100 --> 00:15:59,600
OK, so I apologize for the very long video here, but as I mentioned, some of the stuff was just a

242
00:15:59,600 --> 00:16:02,090
little bit strange, so I wanted to make it all optional.

243
00:16:02,450 --> 00:16:05,280
Hopefully you've got some better syntax highlighting being applied.

244
00:16:05,630 --> 00:16:08,360
Let's take a pause right now and move on in the next video.