[gatsby-transformer-remark] GitHub flavored markdown not working

[jcoryalvernaz]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

After our recent migration to Gatsby V3 we noticed that GitHub flavored markdown stopped being parsed as expected. We use a GitHub markdown trick for writing tables that don't have table headers, and the output ends up getting parsed as a paragraph. I know that with remark v13.0.0, gfm is now its own plugin and we actually installed and used this for our Netlify CMS preview with no issues. However, our regular template pages created using this plugin are having this parsing issue. Is there a possibility that the gfm plugin was not implemented correctly with the bump to remark 13.0.0?

Reproduction Link

https://github.com/jcoryalvernaz/gfm-reproduction

Steps to Reproduce

1. npm install
2. npm start
3. Navigate to http://localhost:8000/my-second-post/
   ...

Expected Result

Tables should be rendered properly:

Actual Result

Tables are rendered as paragraphs:

Environment

System:
    OS: macOS 11.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.18.3 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.6 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 91.0.4472.114
    Safari: 14.1.1
  npmPackages:
    gatsby: ^3.9.1 => 3.9.1
    gatsby-plugin-feed: ^3.9.0 => 3.9.0
    gatsby-plugin-gatsby-cloud: ^2.9.1 => 2.9.1
    gatsby-plugin-google-analytics: ^3.9.0 => 3.9.0
    gatsby-plugin-image: ^1.9.0 => 1.9.0
    gatsby-plugin-manifest: ^3.9.0 => 3.9.0
    gatsby-plugin-offline: ^4.9.0 => 4.9.0
    gatsby-plugin-react-helmet: ^4.9.0 => 4.9.0
    gatsby-plugin-sharp: ^3.9.0 => 3.9.0
    gatsby-remark-copy-linked-files: ^4.6.0 => 4.6.0
    gatsby-remark-images: ^5.6.0 => 5.6.0
    gatsby-remark-prismjs: ^5.6.0 => 5.6.0
    gatsby-remark-responsive-iframe: ^4.6.0 => 4.6.0
    gatsby-remark-smartypants: ^4.6.0 => 4.6.0
    gatsby-source-filesystem: ^3.9.0 => 3.9.0
    gatsby-transformer-remark: ^4.6.0 => 4.6.0
    gatsby-transformer-sharp: ^3.9.0 => 3.9.0
  npmGlobalPackages:
    gatsby-cli: 3.2.0

Config Flags

No response

[LekoArts]

Hi!

I don't think this is an issue with Gatsby as we correctly use remark-gfm:

gatsby/packages/gatsby-transformer-remark/src/extend-node-type.js

Line 117 in a0b542b

remark = remark.use(remarkGfm)

I think your syntax is not working anymore for gfm, since the preview of your markdown file doesn't work:
https://github.com/jcoryalvernaz/gfm-reproduction/blob/master/content/blog/my-second-post/index.md

Also a minimal remark + remark-gfm example shows that it doesn't correctly parse it:
https://codesandbox.io/s/remark-debug-remark-gfm-770t1?file=/src/index.js

Once you add table headings there it creates a proper table.