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.