But yeah, if we want to be as specific as possible, we need to switch to the core library. Okay, that's an aside though. So this is looking good, and if I go back to my Home component, we have our code snippet, and then we import the highlighting service, and then we listen for the mounted hook, and then we call highlightElement. Okay, that might be one too many steps for me, so why don't we take this a step further. I'm going to add a components directory, and within there, let's add a new component, and we're going to call this Highlight. So my goal now is to tuck away all of that highlight initialization setup work into this single component, so that I don't have to look at it again.

So my goal now is to tuck away all of that highlight initialization setup work into this single component, so that I don't have to look at it again. Okay, let's see how. The first step would be, well, I could just grab all of this and move it over. Then we need something to highlight, so we would have pre tags, code tags, and we would need some kind of, well, we could do a slot here, but typically, the snippet you're highlighting would come from a database record or something like that. So with that in mind, why don't we accept the code snippet as a prop, and then we will define that here, code, which is a string. Finally, when the component mounts, we'll add a ref called code, and then we will call

define that here, code, which is a string. Finally, when the component mounts, we'll add a ref called code, and then we will call highlightElement on that. Okay, so we've set up a very quick but useful highlighting component. Now think about it. If I come back to my home view, right here, like I said, something like this would typically come from your database. So let's do this. Let's do a script setup here, and then we'll call it our codeSnippet, and I'll use template tags here, like that.

Let's do a script setup here, and then we'll call it our code snippet, and I'll use template tags here, like that. And then let me just call trim to remove any extra spaces there. Okay, so because I'm using script setup, of course, the snippet variable is instantly available to me. So now I can remove the pre-tag entirely and replace it with our new highlight component. We are highlighting code, and I'll give it this snippet here. All right, so let's think about what happens. When you visit the home page, we will attempt to highlight this snippet right here. Now if we click through to highlight, we accept the snippet as code, and then we listen

When you visit the home page, we will attempt to highlight this snippet right here. Now if we click through to highlight, we accept the snippet as code, and then we listen for when the component mounts, and we call highlightElement, and we pass through the corresponding code tag that contains the snippet. So let's see if this works. Switch back to Firefox, give this a refresh, and it works just the same. Very cool. And in fact, if we want, I'm using the options API here, we could swap that over to script setup, and I'll just need to swap this over to defineProps, like so. And then for the mounted hook, we need to import onMounted from Vue 3.