Gatsby: Markdown not displaying as expected

[dderooy]

Summary

In my project I use GraphQL to pull markdown content into my Gatsby pages. The site loads with no errors however the Markdown content is not displaying as expected. It shows up as unformatted text.

Code Setup

// content/test.md

# Yay Markdown
## So cool
wow a list!
- item 2 
- item 3

**bolded text**

// content/test.json

{
    "test": "test.md"
}



md5-4d8623156effcf17faa2e27e976ee983



// pages/page1.js

import React from 'react';
import { graphql } from 'gatsby';

<div
     dangerouslySetInnerHTML={{
          __html: data.testJson.test.childMarkdownRemark.html,
      }}
/>

export const query = graphql`
  query PageQuery {
    testJson {
      test {
        childMarkdownRemark {
          html
        }
      }
    }
  }
`;

How it displays

Yay Markdown
So cool
wow a list!

item 2
item 3
bolded text

Environment

System:
OS: macOS 10.14
CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 11.1.0 - /usr/local/bin/node
Yarn: 1.12.3 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Browsers:
Chrome: 71.0.3578.98
Safari: 12.0
npmPackages:
gatsby: ^2.0.53 => 2.0.53
gatsby-image: ^2.0.5 => 2.0.5
gatsby-mdx: ^0.2.0 => 0.2.0
gatsby-plugin-eslint: ^2.0.1 => 2.0.1
gatsby-plugin-offline: ^2.0.5 => 2.0.5
gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0
gatsby-plugin-react-svg: ^2.0.0 => 2.0.0
gatsby-plugin-sharp: ^2.0.15 => 2.0.15
gatsby-plugin-sitemap: ^2.0.1 => 2.0.1
gatsby-plugin-styled-components: ^3.0.0 => 3.0.0
gatsby-plugin-webpack-size: ^0.0.2 => 0.0.2
gatsby-source-filesystem: ^2.0.1 => 2.0.1
gatsby-transformer-json: ^2.1.1 => 2.1.1
gatsby-transformer-remark: ^2.1.1 => 2.1.1
gatsby-transformer-sharp: ^2.1.1 => 2.1.1
npmGlobalPackages:
gatsby-cli: 2.4.4

[sidharthachatterjee]

@dderooy Could you link to a minimal reproduction repo if possible?

What does your gatsby-config.js file look like?

[dderooy]

@sidharthachatterjee sorry I am unable to make a reproduction repo for this but here is my gatsby config

// gatsby-config.js

const siteConfig = require('./site-config');

module.exports = {
  siteMetadata: {
    ...siteConfig,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-sitemap`,
    `gatsby-plugin-offline`,
    `gatsby-transformer-json`,
    `gatsby-transformer-remark`,
    `gatsby-plugin-eslint`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `content`,
        path: `${__dirname}/content`,
      },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-webpack-size`,
    `gatsby-mdx`,
    {
      resolve: `gatsby-plugin-react-svg`,
      options: {
        rule: {
          include: /images/,
        },
      },
    },
  ],
};

also side note: I've been playing around with the gatsby-mdx plugin and it seems to be having similar issues.

[sidharthachatterjee]

@dderooy Thank you for posting your config. I've tested this with your setup and can't seem to reproduce this.

Could you please link to a reproduction repo? That'll help us to solve this quickly 🙂

[dderooy]

@sidharthachatterjee I booted up a fresh repo of the Gatsby starter I am using and noticed the problem existed right from the start. It must be something to do with the starter formatting? Here is the repo:
https://github.com/fabe/gatsby-universal

I think it something to do with the styles in 'src/global.css.js'

[sidharthachatterjee]

@dderooy Yeah, it appears in pages/index.js that it renders data.homeJson.content.childMarkdownRemark.rawMarkdownBody

That is the raw markdown body.

You’ll want to render data.homeJson.content.childMarkdownRemark.html using React’s dangerouslySetInnerHTML

[dderooy]

If you update 'content/about/content.md' with the example markdown above it has the same issue. And yea I'm making sure to use childMarkdownRemark.html . I took away the global style in the page 'layout.js' and then it displays correctly. So theres the problem! Now to fix it without breaking the rest of the site haha

[dderooy]

@sidharthachatterjee I updated the global styles CSS and have it displaying properly now. Thanks for your help! 😃

[mimbimbo]

@dderooy I'm having the same issue! How did you update the global styles CSS?

[asxplicit]

@mimbimbo I was facing the same issue. Removing this custom style from my .css file fixed the issue.

li {
  display: block;
}

Remove any custom style of ol and li from global style css.

[rutikwankhade]

I have the same issue. I tried removing all custom css but still it is not rendering as expected. Is there any other solution?