Alright, next up, let's review some suggestions for code organization. But first, we'll need an example. So maybe we're building a blog or something like that, and we're going to have certain sections that require syntax highlighting. Let's figure out how to structure that. Now, I often use a tool called Highlight.js, so why don't we stick with that. If we have a look at usage, I'm going to look for something like npm. And it looks like we can install Highlight.js and then require it. Okay. npm install Highlight.js Alright.

Okay. npm install highlight.js Alright. So now let's switch back, and I will visit that home page. Maybe the home page is our blog, at least for this little example. Okay. Now generally, for syntax highlighting, we'll have a <pre> tag and then <code> tags within it. And let me add a little snippet here. Something like a generic PHP class. Okay, so if I switch back to Firefox, and we refresh, of course we see it, but there's no highlighting yet.

Okay, so if I switch back to Firefox, and we refresh, of course we see it, but there's no highlighting yet. So I will do it right here. Import Highlight.js from Highlight.js. Next we need to grab the CSS. We can do this externally, or I'm using Webpack here. So I could just say import Highlight.js, and what is it, styles, and here's all the various styles. I'm going to use one like GitHub dark. Alright.

So if I switch back to the browser, give it a refresh, it's working. But we should probably do a little bit of tweaking. You'll see that there is a registerLanguage method we can call that will allow us to selectively highlight only certain languages for the smallest footprint. Alright. So to do that, we need to require the common library, and then we can manually pull in each language that we want to support. So that might take the shape of something like this, live common, and then for example, if we want to support JavaScript, we would say highlight.js/live, I think it's the languages/JavaScript.

work within my home page, because maybe if in my settings section I'm going to have some syntax highlighting as well, at the moment we're copying all of that to the new page component, and yeah, it just doesn't make sense. So instead, I'd recommend wrapping it up into a module. Maybe something like this. Let's go into our JS directory. We can call this anything we want, maybe services. And this first one is small enough, but it is a service for handling syntax highlighting. Okay, so now think about it. I can grab, well, all of this junk, and I'm going to move it into our module.

Okay, so now think about it. I can grab, well, all of this junk, and I'm going to move it into our module. Alright, what else do we have here? Now, from any page component, we just need some way to say, highlight this code. Okay, let's switch back, and rather than exporting the third-party library entirely, well, we're already wrapping it up, so why don't we expose our own API that will probably have a much smaller surface area. Maybe something like this. export function highlight. And to get us started, that's just going to do what we had over here.

Export function highlight. And to get us started, that's just going to do what we had over here. So I will paste that in. Alright, let's give it a shot. So we come on back, we'll pull it in. So we need highlight, like so. And now I can simply say, when the component mounts, call highlight. So give it a reformat. Switch back to Firefox, go to our home page, give it a refresh, and everything is working just like it did before.

Switch back to Firefox, go to our home page, give it a refresh, and everything is working just like it did before. But now, yeah, I've wrapped it up. I've extracted all of that common code into its own module. Now it might be useful to export more than one function. So maybe for our API, we'll have one called highlightAll, but then another that's a little more generic called highlight, and it'll accept a selector. We could then say something like document.querySelector(selector), and should we tack on the code tag? So let's think.

on the code tag? So let's think. If somebody uses this by saying highlight, and they're going to say maybe my div, yeah, if we accept that, we would then actually want to hunt down any code tags within that selector. Yeah. Okay. So we'd say plus precode. Let's find all of the matches. And then for each one, we will highlight that individual block.

Let's find all of the matches. And then for each one, we will highlight that individual block. So I think we can say highlight, what is it called? highlightElement. So this is sort of the long form way of saying highlightAll, but it gives us a little more flexibility. Yeah. And I think that should do it. So let's give this a shot. We now have highlightAll.

So let's give this a shot. We now have highlight all. And that should do the trick, give it a refresh. But now let's try to highlight just one section here. And let's do this. Let's surround this with a div called exampleTwo. And then reformat, come on down here. Now we're just going to import our single highlight function, and we'll call it exampleTwo. All right, cross your fingers, come back, give it a refresh.

So maybe we could stick with a single highlight function. And we could just say, well, if you did not give us a selector, then we're just going to find and highlight everything we can. So I'll just grab that here and bring it in and then return. That would allow me to get rid of this method. And then back here, if you do give us a selector, then we will try to track down manually any of the pretexts. And yeah, maybe that's a little more convenient. Now I pull in a single function. That's the only thing available to me, so I don't have to figure it out or read documentation.

Now I pull in a single function. That's the only thing available to me, so I don't have to figure it out or read documentation. And it should all work the way we expect. Here's a single highlight. Or if I remove it, we instead highlight everything. OK, now last little thing that you might run into. Let's say we want to feed it an existing code tag here as a DOM element rather than a selector. So for example, I could say ref code. And then I kind of want to say something like this, .refs.code, and just have that work. So if I come back and give it a refresh, though, that's not going to work.

here, and for each element, we will call our new function. All right, I hope that makes sense. So now if we come back, we have a new one here called highlightElement, and that is for specifically adding syntax highlighting to an existing element. Refresh, and it works. All right, so yeah, it's a simple enough example. But trust me, this approach here where you wrap up existing services and then you expose your own API, this is the bedrock of programming. So I'll keep showing you some more examples in future videos.