Search code examples
tailwind-cssmarkdownastrojs

How to use HTML instead of Markdown in Astro blog posts

I have a site I built in Astro and Tailwind but instead of using Markdown with the blog, I want to have the blog pages be regular .astro files.

Alternatively, how do I style the blog post pages if I keep them in Markdown?

Solution

  • Markdown supports use of HTML syntax, so you should be able to mix syntaxes or even use pure HTML in a .md file.

    ---
title: My Markdown Post
---

<p class="special">
This is styled differently via the `special` class
</p>

This is a regular Markdown paragraph.

    If you're just looking to apply consistent styles to Markdown content, you can do that by adding styles to the container where you render your Markdown file.

    <div class="content">
  <Content />
</div>

<style>
.content :global(h1) {
  color: red;
}
</style>

    Note the use of the :global() selector to reach in and style elements that come from the Markdown document.