This episode is for members only
Sign up to access "Build a Forum with Inertia and Laravel" right now.
Get started
Already a member? Sign in to continue
Playing
31. Generating markdown for posts
Episodes
01. Introduction and demo
6m 59s
0%
02. Getting set up
10m 36s
0%
03. Modifying registration for usernames
7m 15s
0%
04. Figuring out the forum layout
5m 57s
0%
05. Creating and listing topics
9m 15s
0%
06. Basic discussion listing
13m 33s
0%
07. Pinning discussions
4m 1s
0%
08. Tackling pagination in Inertia
8m 23s
0%
09. Customising pagination text in Laravel
52s
0%
10. Showing a discussion
6m 4s
0%
11. Setting up discussion posts
5m 53s
0%
12. Listing through discussion posts
5m 28s
0%
13. Adding more data to posts
8m 24s
0%
14. Adding pagination to posts
1m 35s
0%
15. Adding a post preview to discussions
4m 52s
0%
16. Adding the last reply to discussions
5m 54s
0%
17. Outputting discussion participants
8m 4s
0%
18. Limiting participants in the UI
5m 56s
0%
19. Ordering discussions by last post
4m 30s
0%
20. Handling deleted users
2m 31s
0%
21. Counting replies
8m 13s
0%
22. Building our first filter
8m 31s
0%
23. Highlighting current filters, and merging with pagination
5m 37s
0%
24. Adding auth specific filters
6m 40s
0%
25. Adding the topic filter
8m 18s
0%
26. Scaffolding the new discussion form
13m 29s
0%
27. Toggling the create discussion form
9m 2s
0%
28. Keeping form state
4m 59s
0%
29. Storing a new discussion
11m 29s
0%
30. Discussion validation and authorization
5m 1s
0%
31. Generating markdown for posts
8m 37s
0%
32. Toggling the markdown preview
7m 43s
0%
33. Fetching and displaying markdown
8m 6s
0%
34. Adding a markdown shortcut toolbar
5m 53s
0%
35. Dealing with SVG icons
7m 46s
0%
36. Creating the reply form
7m 48s
0%
37. Basic Inertia permission checking
6m 26s
0%
38. Creating replies to discussions
5m 37s
0%
39. Jumping to posts
11m 40s
0%
40. Automatically scrolling to posts
6m 18s
0%
41. Toggling post editing
7m 32s
0%
42. Editing posts
3m 36s
0%
43. Deleting posts
4m 21s
0%
44. Deleting discussions
6m 7s
0%
45. Setting up for best answers
7m 29s
0%
46. Toggling the best discussion answer
12m 14s
0%
47. Solved and unsolved filters
2m 23s
0%
48. Indexing discussions for search
8m 6s
0%
49. Searching discussions
12m 35s
0%
50. Debouncing search
2m 47s
0%
51. Adding mentionable functionality to forms
6m 32s
0%
52. Indexing users for mentioning
9m 9s
0%
53. Hooking up users for mentions
10m 10s
0%
54. Detecting and storing mentioned users
9m 54s
0%
55. Adding the mentioned filter
2m 26s
0%
56. Adding mentions to the markdown toolbar
1m 1s
0%
57. Adding mentions to the reply form
7m 21s
0%
58. Fixing up some unauthenticated state
1m 1s
0%
59. Fixing up post scrolling
1m 48s
0%
60. Reviewing SSR (Server-side rendering)
8m 20s
0%
61. Preventing parent posts from being deleted
2m 31s
0%
62. Improving solution marking
4m 9s
0%
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.
62 episodes•6 hrs 54 mins•2 years ago
Overview
Ready to build a forum with Inertia and Laravel?
Why a forum? A forum touches a whole load of concepts that you'll use throughout your development career – particularly on the client-side, where we'll be doing most of the heavy lifting.
So, let's build a clean, modern forum with features like markdown support, code highlighting, advanced filtering, user mentions, full-text search, the ability to mark best answers, and more.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!