I write all my posts in markdown. I love it, and since I use TailwindCSS and I don't want to add classes to all the h1, h2, p and so, I use it's Typography Plugin, which adds some styles for me.

In addition to headers, paragraphs, emphasis, and all the writing stuff, already covered in markdown and the typography plugin, some times we need additional structures in our posts. For example, what if we want to add code? Well, that is already well covered with the code syntax, with the plugin that adds syntax highlighting, but when it comes to something else, well, we have at least two options:

a) Use another plugin. Many plugins are allowing us to add custom classes to our markdown. You need to install and configure them and then use its syntax to add the custom class. Bear in mind that some of these plugins only allow adding one class per "block" (or div), meaning you need to define all the CSS attributes to this class elsewhere, for example, in Tailwind's CSS config.

b) Just. Use. HTML. Yes, you can do that. Try this:

# This is the title
## This is a section

Here we go with some text, **with bold** and stuff.

<div class="px-4 py-2 bg-teal-200 text-teal-600 font-semibold border-l-4 border-teal-600 rounded-r-lg">
    <p>And here we have a custom div with custom classes<p>
</div>

I'll paste this code just here, without the code enclosing.

This is the title

This is a section

Here we go with some text, with bold and stuff.

Nice, isn't it?

Is there a limitation to this? Hmmm. Maybe. Probably. It depends. Markdown language is always parsed by some engine, so it depends on the engine supporting it. Still, I think almost any markdown parser must allow using custom HTML.

Useful Links

• Typography Plugin