Build A Static File Blog with Laravel
This episode is for members only

Sign up to access "Build A Static File Blog with Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
13. Better syntax highlighting

Episodes

0%
Your progress
  • Total: 1h 11m
  • Played: 0m
  • Remaining: 1h 11m
Join or sign in to track your progress

Transcript

00:00
So it's time to introduce better syntax highlighting or different syntax highlighting,
00:05
depending on the way you want to look at it. You can pretty much use any renderer you want for your Markdown content. And I'm going to switch this up to use the Laravel Markdown package, which uses a front end styling solution as well using Sheeky.
00:21
So let's go ahead and see how we can get this to work. And before we install this package, let's just remind ourselves about the Sheets config that we looked at earlier. So remember, we have this content parser.
00:34
So let's go ahead and open this up. This is the Markdown with Front Matter parser. Down here, you can see that we're using a Common Mark Markdown renderer to render out the body of the contents of this file
00:47
that we get through after we've gone ahead and pulled this out using YAML Front Matter. So really what we want to do here is choose a Markdown rendering solution that we prefer or that we can work with better and then just switch out inside of here. And of course, we're not going to modify the actual file in here
01:06
because this exists within that package. We'll go ahead and create our own parser. We'll store that ourselves and then we'll go ahead and modify it and switch out in here. OK, so let's do that first of all.
01:16
So we can just pick anywhere we want for this. It's a pretty simple app. So let's just keep the same sort of structure as this. So let's create our content parsers directory here.
01:27
And to be honest, we can pretty much give it the same name because it is really doing the same thing. We're just switching out the end Markdown solution. So now that we've done that, we can actually go ahead and open up this file here
01:39
and copy it over and just make a couple of adjustments. So I've copied that over. We can get rid of this Common Mark Converter Injection because we're not going to need that anymore.
01:50
We can just keep the parse method in here and we can get rid of any of the imports that we don't necessarily need. And of course, we can change over the namespace here. OK, so let's just get rid of this and just output the document body on its own.
02:08
And then we'll switch this out for the new solution after we've changed our config over. So I'm going to go ahead and pull in our own Markdown with Front Matter Parser. Let's head over and give this a refresh. And as you would expect, because we're now within our own parser
02:24
and we're not rendering Markdown, it just gives us a dump of the contents of that, which is fine because now we can install this new package and just switch it over. OK, so regardless of the Markdown package you're using, let's go ahead and install Laravel Markdown.
02:41
And then let's head over and install Sheeky on the front end. So that will give us some really nice syntax highlighting. And we can also change the theme, which is really important here. So let's pull that in as well.
02:54
And we want to go ahead and publish the config file, because that is where we are going to or one of the places that we can go ahead and change around the theme for our Markdown. So that's all done.
03:05
OK, so we can close this off now and I'll guide you through how we're going to get this to work inside our own parser. So to do this, we're going to go and fetch out of our container the Markdown renderer. And I just need to re-index here.
03:21
So let's try that again. Markdown renderer. There we go. Pull that out and let's grab that document body.
03:28
We're going to go ahead and just say to HTML in here and pass that in. That is pretty much we need to do. So we're going to head over to the Markdown config that has just been generated for us. And you'll see that this makes use of caching, which is really important.
03:45
We've got a renderer class. We've got some extensions in here. But all the way at the top here, we've got our code highlighting section, which is what we're interested in, whether this is enabled and the theme.
03:55
So I'm going to switch this out to a Nord theme. And really importantly, because everything is cached here, if you do make changes to the theme or anything like that, you are going to want to go and run PHP artisan cache clear.
04:10
So really important every time you make a change there, something like your theme, or it's just not going to take effect. OK, now that's done. Let's head back over and see our new Markdown renderer in action.
04:20
And there we go. So everything pretty much looks the same. Markdown is obviously a standard, so it's all going to work in the same way. But now we have some really nice syntax highlighting in here,
04:33
powered on the front end by Sheeky. And we've got all of our colors in here and everything that we need. So you can change around that theme within the config. All of the themes that are available are in the documentation for this.
04:44
So you can switch them up. Just don't forget to clear your cache. Without the cache, this would actually be very slow. So if we, for example, head over to the network tab here,
04:54
we've got 36 milliseconds-ish, or even less, once we have some caching in place for rendering this page out, let's just look at changing around one of our blog posts. So I'm going to go down here to building a blog in Laravel.
05:08
And I'm just going to add hello on the front. And I'm going to come over and refresh. And you can see that was a slightly longer, well, a massively longer load time. But once that Markdown gets cached, we're back down to like 20,
05:23
or less than 20 milliseconds, just to render this page out. So there we go. We have changed over the way that the Markdown and syntax highlighting has been output. You can, of course, choose your own solution and just follow the same steps.

Episode summary

In this episode, we're giving our Markdown content some much-needed syntax highlighting upgrades. We kick things off by talking about why and how you might want to use a different Markdown renderer for your app, especially one that offers better syntax highlighting for code blocks.

We start by reviewing the existing content parser, which uses the CommonMark renderer. But instead of hacking away at the package files, we create our own parser so we have more flexibility. It's just a quick copy-and-tweak job — strip out what we don't need, adjust the namespace, and prep it for our new, shiny rendering engine.

Next, we install the Laravel Markdown package, which lets us plug into Sheeky (a front-end library for code highlighting). We go through installing both packages, publishing config files, and setting up the theme — with plenty of pointers on where to flip the switches for different highlighting styles. Don’t forget to clear your cache after making changes so they actually show up!

Finally, we wire up our new parser, render some Markdown, and check out the results. Code blocks look gorgeous with the new theme, and all the colors are customizable. There’s a quick demo of how the caching works and why it’s important for performance. By the end, you’ll know exactly how to swap out your Markdown rendering and get beautiful syntax highlighting in your Laravel app.

Episode discussion

No comments, yet. Be the first!