How to Style your Markdown Content in Gatsby 📝
By: Chetan Raj
Tags: CSS, Gatsbyjs, Web Development, React, JavaScript

Gatsby offers out of the box support to write the content in markdown and create pages easily in your app and with the leverage of many Gatsby Plugins, we can do many things like format code snippets, lazy load images, generating an RSS feed, creating a Sitemap, making SEO easier and a lot more 🥳

Writing a blog post in markdown is easier, no need to worry about styling, # makes H1, ## makes H2, the normal text makes a paragraph, adding links, images and so on.

But how to style the markdown content when the pages are generated, the default browser styles don’t look good, so then how to approach 🤔

Here are few ways to style your markdown content 👇

1. Using Tailwind CSS

Tailwind CSS is great 😍 The utility CSS that tailwind provides is easier to use and you can also generate your own utilities from the config file. For a simple blog, you don’t have to use the full config that the Tailwind provides, you can spin up🌪 your own version of config.

How to style

While using Gatsby, we can style the content which are in the pages or components, but how to style the content in the markdown, because the markdown process the markdown language and Gatsby generates the HTML content. Yes, there is a way to style the markdown content ✨ Using gatsby-remark-classes we can solve this problem, you can add class attributes to markdown elements. This plugin will help to do that

Install:

npm install — save gatsby-remark-classes

How to configure:

gatsby-config.js

Advantages

No writing separate CSS for the HTML elements generated in markdown

.blog-post-container h1 { } .blog-post-container h2 { } .blog-post-container p { }

2. Using styled-components

Nowadays styled-components are one of the ways to style your app. But how to style the markdown content using styled-components 🤔

To style the markdown content, we need to define the components first 👇

And in the file where you’re programming the blog post, here I’m assuming the file to be blog-post.js. Import the elements into this file.

import { Title, Paragraph } from "./elements";

The Title & Paragraph are the component which we will be using to design the markdown content.

By using rehype-react with htmlAst method, we can write custom React components and then reference to the elements in markdown

In your blog-post.js file, replace this line:

<div dangerouslySetInnerHTML={{ __html: post.html }} />

With

{renderAst(post.htmlAst)}

And also add htmlAst in the graphql query:

The above-mentioned steps will help in styling your markdown content with styled-components .

3. Using Classless CSS Frameworks

Say you don’t want to write CSS only 🤯 Using these Classless CSS frameworks you don’t have to write even a single line in CSS

I have listed some of the frameworks below

Sakura

Water.css

awsm.css

new.css

Bahunya

MVP.css

AttriCSS

Advantages

📦 Bundle size is smaller

🤔 Don’t have to remember the classes

👌🏻 For a simple blog or to beautify markdown parsed content

✨ People who love ❤️ beautiful defaults

You can also refer to this Instagram post to know about Classless CSS Frameworks