Markdown format is not working 100%

[Isaac-Tait]

Markdown horizontal rule not recognized

I came across this issue from August #26246 that might be related. Following this Markdown syntax guide three or more *** or --- or ___ should produce a horizontal rule line. However, this is not happening.

Per this GatsbyJS article I checked my gatsby-config.js which only the pertinent info is pasted below. According to the documentation commonmark is defaulted to true but I set it to true just in case. With or without the commonmark: true, line though horizontal rule did not work...

resolve: `gatsby-transformer-remark`,
      options: {
        commonmark: true,
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },

Steps to reproduce

Here is a link to my repo with the code, which can be found at:

|-- content
      |--blog
           |--"blog url"
                 |--index.md <== here
|-- node_modules
|-- public
|-- etc....

---

Expected result

I am expecting a horizontal rule to be placed within the blog post

Actual result

There is no horizontal rule (a.k.a line) displayed. It seems that one or two ** or -- or __ show as gray then when the third *,-,_ is added it is hard grayed out...

Environment

System:
OS: macOS 10.15.7
CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 14.9.0 - /usr/local/bin/node
Yarn: 1.22.5 - /usr/local/bin/yarn
npm: 6.14.8 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Firefox: 81.0.2
Safari: 14.0
npmPackages:
gatsby: ^2.24.85 => 2.24.85
gatsby-awesome-pagination: ^0.3.6 => 0.3.6
gatsby-image: ^2.4.21 => 2.4.21
gatsby-plugin-feed: ^2.5.19 => 2.5.19
gatsby-plugin-manifest: ^2.4.35 => 2.4.35
gatsby-plugin-netlify: ^2.3.24 => 2.3.24
gatsby-plugin-offline: ^3.2.37 => 3.2.37
gatsby-plugin-postcss: ^2.3.13 => 2.3.13
gatsby-plugin-react-helmet: ^3.3.14 => 3.3.14
gatsby-plugin-sharp: ^2.6.43 => 2.6.43
gatsby-plugin-typography: ^2.5.13 => 2.5.13
gatsby-remark-copy-linked-files: ^2.3.19 => 2.3.19
gatsby-remark-images: ^3.3.39 => 3.3.39
gatsby-remark-prismjs: ^3.5.16 => 3.5.16
gatsby-remark-responsive-iframe: ^2.4.17 => 2.4.17
gatsby-remark-smartypants: ^2.3.13 => 2.3.13
gatsby-source-filesystem: ^2.3.35 => 2.3.35
gatsby-transformer-remark: ^2.8.46 => 2.8.46
gatsby-transformer-sharp: ^2.5.19 => 2.5.19
npmGlobalPackages:
gatsby-cli: 2.12.111

I should mention that my blog is running TailwindCSS. Not sure if that could be causing the issue...

I am pretty new to Gatsby but I am more than happy to help resolve this issue (if it is indeed an issue and not a noob user error). Thank you in advance for any assistance with this. Cheers.

[LekoArts]

When testing it out in a codesandbox the <hr> element appears just fine. You're missing the necessary CSS styles for it to appear. I think Tailwind only adds styles for it with the typography plugin.

Adding this let's it appear.

hr {
  height: 2px;
  background: black;
}

[Isaac-Tait]

Thank you very much for your response - I really appreciate the information 🤓