Markdown not displaying as expected

[dderooy]

Styles in 'src/global.css.js' are overriding markdown formatting. Markdown lists and headers etc are displaying as plain text. Is there a way to ignore the global style for all markdown content?

ps. great template by the way

[gjhltn]

Im having a similar issue, but (in my case) the markdown isn't being overridden, it's not being transformed.

Steps to reproduce:

1. gatsby new my-site https://github.com/fabe/gatsby-universal
2. in (eg) ~/content/home/intro.md add

# Broken :-(

[link](https://www.google.com)

3. Expected:

<h1>Broken :-(</h1>
<a href="https://www.google.com">link</a>

EDIT: poorly chosen example because this is actually inside an h2 tag, but the same problem, occurs everywhere

UPDATE: My mistake - this is expected! Sorry. To get rendered markdown. change the template to

{data.homeJson.content.childMarkdownRemark.html}

[fabe]

@dderooy global.css.js is basically just a CSS reset. Feel free to just edit the file, for example add this to the end of the stylesheet:

ul {
  list-style: square;
}

That stylesheet is definitely meant to be overwritten by you 🙂

If you don't want to touch that file, you can also add some rules for that in component stylesheets, for example box.css.js:

export const Container = styled.div`
  padding: 2rem 4rem;
  max-width: 700px;

  ul {
    list-style: square;
  }
`;

Then only the lists inside <Box/> components are being styled!

---

@gswirrl You can use the HTML by querying for it in the page query and referencing it in the template. I'm not actually using converted markdown on the homepage. For example:

src/pages/about.js

<div
  dangerouslySetInnerHTML={{
    __html: data.aboutJson.content.childMarkdownRemark.html, // <- HTML
  }}
/>

This uses markdown converted to HTML.

src/pages/index.js

<Title as="h2" size="large">
  {data.homeJson.content.childMarkdownRemark.rawMarkdownBody} // <- Raw Markdown, not converted to HTML
</Title>

This is just using raw markdown. You can get the HTML by getting the .html value instead of the .rawMarkdownBody value.

[gjhltn]

@fabe thanks so much for the full reply - id just figured it out and was editing my comment! :-) d'oh!

once again, thank you - love the starter!

[dderooy]

@fabe Thank you for the help. I have it displaying properly now 😄 👍

[fabe]

@gswirrl @dderooy Thanks, let me know if anything else comes up! 🙂

[dannycahyo]

I have the same issues. I've already used HTML to display my markdown file. For example like this :
<div dangerouslySetInnerHTML={{ __html: html }} />
I still can't display the markdown file properly, here is the case. I want to display ## Heading 2, but it just shows Heading 2, which is just plain text.
Besides, I also use Chakra UI.

Can anyone give me the solution, please?