CSS for Styling a Markdown Post

Summary

Writing blog posts in markdown is great. It’s simple and fast. Markdown is a simple way to write text using common symbols to add things like **bold**, *italics*, or lists. Here’s an overview of things you can achieve with Markdown: Markdown Cheat Sheet. Many webpages have their content written in markdown. There are many frameworks that use markdown like Astro, Hugo or Eleventy. The markdown content gets transformed into HTML that is displayed on the website. But when you are building your own website you will also want to style that content, so how could that look like? On styling content written in markdown There are multiple ways you can approach styling your own markdown content. Because I’d like my written content design to fit into the rest of the page I like to write my own styles. This is a bit of work though as we have to write styling for the various elements that markdown allows us to create. Part of your styling such as <p> and <h1> elements might already have styling defined in your main CSS file that you can continue to use. But markdown content can also include images, code blocks, quotes, tables and more which we have to take care of. Styling the different elements I will assume that the html should look something like this: <article class="markdown-container"> <slot /> <!-- //Markdown content inserted here --> To this container we want to apply some styling as well as on all its children like this: width: min(100% - 2rem, 700px);.markdown-container > *:not(:first-child) { margin-block-start: 1.5em; The markdown-container will have a max width of 700px, or smaller for mobile devices. The keyword min selects the smaller amount. Instead of a max-width of 700px you could use 75ch, which would count characters. You might also want to make the container into a flex-box or grid depending on how you want to control your layout. To space the elements I give all direct children of the container except for the first a margin-top of 1.5em. Paragraph <p> We wan...