Skip to content

Anson LowZF Blog

How to style Gatsby Theme Blog's Markdown or MDX

January 03, 2021

Gatsby Theme Blog’s Markdown order and order and unorder list is too close to each other. How to add a line height to give some white space for every list?

Please note that this approach is for gatsby-theme-blog 2.0. The version 1 has a different appraoch.

  1. Create the file /src/gatsby-plugin-theme-ui/index.js
  2. Add a styles object and the following code
export default {
styles: {
ul: {
lineHeight: 1.75,
ol: {
lineHeight: 1.75,
  1. This “styles” object is a Theme-UI thing, use to styles markdown or MDX. Gatsby Theme Blog use ThemeUI under the hood. Visit ThemeUI to know more.
  2. Add any CSS in JS code to style your Markdown in the “style” object.

A Self Taught Developer Documenting My Learning To Code
Reactjs, Nextjs, Gatsbyjs & MaterialUI