Build a Forum with Inertia and Laravel

Sign in Get started

This episode is for members only

Sign up to access "Build a Forum with Inertia and Laravel" right now.

Already a member? Sign in to continue

Playing

31. Generating markdown for posts

Episodes

0%

Your progress

Total: 6h 54m
Played: 0m
Remaining: 6h 54m

Join or sign in to track your progress

01. Introduction and demo

02. Getting set up

03. Modifying registration for usernames

04. Figuring out the forum layout

05. Creating and listing topics

06. Basic discussion listing

07. Pinning discussions

08. Tackling pagination in Inertia

09. Customising pagination text in Laravel

10. Showing a discussion

11. Setting up discussion posts

12. Listing through discussion posts

13. Adding more data to posts

14. Adding pagination to posts

15. Adding a post preview to discussions

16. Adding the last reply to discussions

17. Outputting discussion participants

18. Limiting participants in the UI

19. Ordering discussions by last post

20. Handling deleted users

21. Counting replies

22. Building our first filter

23. Highlighting current filters, and merging with pagination

24. Adding auth specific filters

25. Adding the topic filter

26. Scaffolding the new discussion form

27. Toggling the create discussion form

28. Keeping form state

29. Storing a new discussion

30. Discussion validation and authorization

31. Generating markdown for posts

32. Toggling the markdown preview

33. Fetching and displaying markdown

34. Adding a markdown shortcut toolbar

35. Dealing with SVG icons

36. Creating the reply form

37. Basic Inertia permission checking

38. Creating replies to discussions

39. Jumping to posts

40. Automatically scrolling to posts

41. Toggling post editing

42. Editing posts

43. Deleting posts

44. Deleting discussions

45. Setting up for best answers

46. Toggling the best discussion answer

47. Solved and unsolved filters

48. Indexing discussions for search

49. Searching discussions

50. Debouncing search

51. Adding mentionable functionality to forms

52. Indexing users for mentioning

53. Hooking up users for mentions

54. Detecting and storing mentioned users

55. Adding the mentioned filter

56. Adding mentions to the markdown toolbar

57. Adding mentions to the reply form

58. Fixing up some unauthenticated state

59. Fixing up post scrolling

60. Reviewing SSR (Server-side rendering)

61. Preventing parent posts from being deleted

62. Improving solution marking

Transcript

00:00

Over the next few episodes, we're going to focus on Markdown.

00:03

So the first thing that we're going to do is head over to any of these discussions that we've already created and we're going to change up the body. So actually renders Markdown that will include code highlighting as well. And we will over the next few episodes

00:19

implement things like the Markdown preview within our create discussion form and also the Markdown toolbar as well, which means we can just click to add them Markdown styles in. OK, so the first thing that we're going to do is put in a package

00:35

that allows us to render Markdown and you can pretty much choose any package you want, but we're going to use the Laravel Markdown package just here. So we're going to go ahead and install this. And then, of course, I will walk you through how to use this.

00:50

So let's go ahead and pull this in. And just before we do anything, let's go ahead and add the navigation into this sidebar here just so we can easily navigate through the forum. So we're going to head over to the show here, go over to the sidebar and pretty

01:05

much just copy what we have from the sidebar in the index here. And of course, for the primary button here as well, we will also put that in when we get to reply. So we'll just paste in the navigation here.

01:18

We don't actually need the query in this case, although it would be helpful to pass it down just in case. So over in the forum or discussion show controller. Let's also pass down the query from the request, just making sure we actually pull

01:37

the request in here, first of all, and let's go ahead and pass the query down here and over on the show page, we can now go ahead and accept that in. As a prop, and we know that's an object, so pretty much just the same as we've done over on the home page.

01:55

We'll also, of course, pull the actual navigation component in and we should be done. We should see that navigation as normal. OK, let's come over and there we go.

02:05

So we can head back to all discussions now and navigate a little bit more easily. OK, so let's go over to our post resource. We know that already for each post we've got a body. We do need the body in here still because

02:18

when we edit a post, we need to reference the original body because when we're editing this, it needs to be the plain text, not the Markdown rendered. So we're going to add in addition to this

02:30

the body and we'll just call this body underscore Markdown to use the package that we've just pulled in. All we need to do is resolve the Markdown renderer out of the container. So let's go ahead and pull in the Markdown renderer.

02:43

Might just need to re index things here. Markdown. And renderer, which is this here, so pull in the fully qualified namespace to that, and then we just need to use

02:55

the two HTML method and pass through the plain text body here. Now, because we don't have a way to edit any of our posts at the moment, we're just going to have to rely on doing this directly in the database until we get to that point.

03:10

So I'm just going to say, hey, maybe do a line down here a couple of times and then maybe do something in bold. So this is bold, just really anything that's going to allow us to see this Markdown and just down here.

03:24

Why don't we just do another line? It doesn't really matter what we do for now. We're going to add some specific styling to this, which you can customize and add to later if you need to.

03:34

OK, so we're going to take what we've got here and over in our posts. Let's just see what we've got here. One more body. Let's just change that over, hit save, and we'll come over.

03:48

Now, at the moment, of course, we're just showing the body within each of these posts. So we're going to need to switch that over to the Markdown. So let's look where we're referencing the body.

03:57

And it's just here. And for this, we can't really just say post Markdown a body Markdown because it's just going to give us the actual HTML doesn't make too much sense. So what we need to do is swap this out for a div with the HTML,

04:12

so actually renders the HTML within this component and we should be good. So let's just go ahead and have a look. And there we go. So already we've got a line down here.

04:23

We're going to need to modify some of the styles in here, like the paragraphs to give them some spacing between them. But you can see it actually working now. So very, very simple to get Markdown working.

04:33

Let's go ahead and add an overall Markdown class to this and we'll just create out some very basic styles in our style sheet here underneath this Markdown. So, for example, for a paragraph, we might want to go ahead and apply some tailwind styles to this,

04:49

like setting a margin bottom of two, maybe we can customize this, maybe change it out, but I think two is fine for now. So you can really control any Markdown that's generated with some very simple styles.

05:01

And you can still use tailwind by using apply. This is a really good use case for apply because we don't really want to add Markdown direct or add tailwind directly to this class in here is just not going to work very well.

05:14

So let's take a look at code highlighting, which is, of course, really important. So for this, I'm going to switch this out to some PHP code. So this is just the Markdown syntax for PHP. And let's just say echo and hello.

05:28

So we'll just keep this super simple for now, and let's go ahead and repaste that into the database, save that out and come over and you'll see that this doesn't quite look right. What it does do is it does give you a code block here with the language in.

05:44

But the package that we have actually pulled in gives us the ability to highlight code directly. So to do this, all we need to do is choose the highlight theme here. So let's go ahead and set this to Nord.

05:57

Any of VS Code supported themes work with this. And of course, check the documentation for this package to find out more. We may just need to go ahead and clear out cache because I know this package leverages caching.

06:10

So let's go ahead and say cache clear. And there we go. Perfect. So we're now getting that Nord theme in there. And of course, you can choose any theme in here that you want or go ahead and set

06:21

a default so it would be sensible to go ahead and set this in the markdown config under here so we could just change this globally to Nord and then go ahead and just get rid of this line here that kind of makes a little bit more sense. OK, so let's do a little bit more styling in here.

06:38

So let's go to app and CSS and we want to specifically style up the code block and the she key class in here, which is responsible for the rendering of them code blocks and syntax highlighting. So we're going to set a padding of six on this.

06:56

We'll set rounded to large. We'll set a margin width of four and we'll set the text to small just so we can fit a little bit more code in. That looks very slightly better with a little bit more better spacing.

07:09

Now, the only issue with markdown and syntax highlighting here is if we have a really long line, it doesn't always work. So let's just grab, say, something like this and go ahead and just paste this in to some, we'll just say HTML for now and paste this in here.

07:29

And let's add this into here. So let's do this just at the bottom. Let's just replace the whole thing. And go over and you can see that this sort of doesn't wrap over,

07:42

it doesn't wrap down, it doesn't allow us to scroll. It's a little bit of a mess if we have long lines. So at least we want this to render properly to get this to work. What we're going to do is using Tailwind again, apply the white space pre wrap

07:57

class and we're going to set the leading to loose overall in our code block just so we can space our code out a little bit more so it can breathe. So you can see now that that's just wrapping everything down and it makes more sense.

08:10

So for markdown, that's pretty much it. Now, what we have done here is just done some very basic styling under this markdown class for the paragraph. If you have anything else like unordered

08:23

list, list items, links that you want to style up, it would probably be a good idea to add these in here as well. We can look at that later and we can always come back and add more, but feel free to add whatever you need to get this looking how you need it to.

Episode summary

In this episode, we kick off our dive into Markdown support for our discussion platform. We start by updating how posts' bodies are displayed—our main goal is to render Markdown (including code highlighting!), rather than just showing plain text. To achieve this, we install the Laravel Markdown package and go step-by-step through integrating it with our existing setup.

We also tidy up our UI a bit by bringing better navigation into the sidebar, making it easier to move around while working on posts. With the Markdown package in place, we adjust our post resources so each post can have both its plain text and its rendered Markdown available. Then, we update the frontend so the Markdown body is properly rendered as HTML in our posts.

Styling gets some love, too—we add a dedicated markdown class and use Tailwind's @apply to easily style paragraphs and code blocks. We make sure code snippets look great by enabling syntax highlighting using the package’s built-in themes—just a quick config change to set everything up (and we clear the cache to make sure it all works!).

Finally, we tackle some edge cases: long lines of code in code blocks, which can look a bit messy if they're not properly handled. With a couple more Tailwind classes (whitespace-pre-wrap and leading-loose), we ensure code blocks wrap and are readable. Throughout, you’re encouraged to extend and customize the styles for other Markdown elements as you like.

By the end, our forum posts are Markdown-powered and look great, setting the stage for even more powerful Markdown tools in future episodes.

Episode discussion

No comments, yet. Be the first!