search

gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.27k stars 10.31k forks source link

gatsby-plugin-mdx never parse `inlineMath` or `math` block into MdxAst #34305

Closed cangSDARM closed 2 years ago

cangSDARM commented 2 years ago

Preliminary Checks

Description

My English may be broken. Sorry, I hope there wasn't any missunderstanding.

The ast: http://localhost:8000/___graphql?query=query%20MyQuery%20%7B%0A%20%20allMdx(filter%3A%20%7Bfields%3A%20%7BtemplateTag%3A%20%7Bin%3A%20%22math%22%7D%7D%7D)%20%7B%0A%20%20%20%20edges%20%7B%0A%20%20%20%20%20%20node%20%7B%0A%20%20%20%20%20%20%20%20mdxAST%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A&operationName=MyQuery The configs: https://github.com/cangSDARM/blog/blob/master/gatsby-config.js#L29

I tried to use gatsby-plugin-katex or remark-html-katex, all required inlineMath and math block in AST, when neither of them exist.

Reproduction Link

https://github.com/cangSDARM/blog

Steps to Reproduce

  1. use my reproduction link
  2. run it locally.
  3. navigate to : http://localhost:8000/math/

Expected Result

render inlineMath or math block

there should be

$x^2 + y_1 = \pi$

and

$$ {x'\brack y'} = \begin{bmatrix} s{x} & 0 \ 0 & s{y} \end{bmatrix}{x\brack y} $$

rendered

Actual Result

all rendered as a raw text

Environment

System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-11320H @ 3.20GHz
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.10.0
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (96.0.1054.62)
  npmPackages:
    gatsby: ~4.4.0 => 4.4.0 
    gatsby-plugin-image: ~2.4.0 => 2.4.0 
    gatsby-plugin-manifest: ~4.4.0 => 4.4.0 
    gatsby-plugin-material-ui: ^4.1.0 => 4.1.0 
    gatsby-plugin-mdx: ~3.4.0 => 3.4.0 
    gatsby-plugin-offline: ~5.4.0 => 5.4.0 
    gatsby-plugin-react-helmet-async: ^1.2.0 => 1.2.0 
    gatsby-plugin-sharp: ~4.4.0 => 4.4.0 
    gatsby-plugin-typescript: ^4.4.0 => 4.4.0 
    gatsby-remark-autolink-headers: ~5.4.0 => 5.4.0 
    gatsby-remark-images: ~6.4.0 => 6.4.0 
    gatsby-remark-prismjs: ~6.4.0 => 6.4.0 
    gatsby-source-filesystem: ~4.4.0 => 4.4.0 
    gatsby-transformer-sharp: ~4.4.0 => 4.4.0 
  npmGlobalPackages:
    gatsby-cli: 4.4.0

Config Flags

none

iChenLei commented 2 years ago

Workaround for you

Downgrade "remark-math"

- "remark-math": "^5.1.1",
+ "remark-math": "^3.0.1",

Work as expected 🎉 !

2021-12-27 23 11 22

Why ?

gatsby-plugin-mdx dependeneices list

    "gatsby-plugin-mdx": {
      "version": "3.4.0",
      "resolved": "https://registry.npmjs.org/gatsby-plugin-mdx/-/gatsby-plugin-mdx-3.4.0.tgz",
      "integrity": "sha512-SJTIZsQ9lhjkd9GX1v4o1kzYPlu5LTWydHNdpddsP4w9U+dBLcKGXm4ee1PHWpwNL1Y8PeOhRQBUGhbLAbeXTA==",
      "requires": {
        "@babel/core": "^7.15.5",
        "@babel/generator": "^7.15.4",
        "@babel/helper-plugin-utils": "^7.14.0",
        "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
        "@babel/preset-env": "^7.15.4",
        "@babel/preset-react": "^7.14.0",
        "@babel/runtime": "^7.15.4",
        "@babel/types": "^7.15.4",
        "camelcase-css": "^2.0.1",
        "change-case": "^3.1.0",
        "core-js": "^3.17.2",
        "dataloader": "^1.4.0",
        "debug": "^4.3.1",
        "escape-string-regexp": "^1.0.5",
        "eval": "^0.1.4",
        "fs-extra": "^10.0.0",
        "gatsby-core-utils": "^3.4.0",
        "gray-matter": "^4.0.2",
        "json5": "^2.1.3",
        "loader-utils": "^1.4.0",
        "lodash": "^4.17.21",
        "mdast-util-to-string": "^1.1.0",
        "mdast-util-toc": "^3.1.0",
        "mime": "^2.4.6",
        "mkdirp": "^1.0.4",
        "p-queue": "^6.6.2",
        "pretty-bytes": "^5.3.0",
        "remark": "^10.0.1",  // ❗❗❗❗ look here❗❗❗❗
        "remark-retext": "^3.1.3",
        "retext-english": "^3.0.4",
        "slugify": "^1.4.4",
        "static-site-generator-webpack-plugin": "^3.4.2",
        "style-to-object": "^0.3.0",
        "underscore.string": "^3.3.5",
        "unified": "^8.4.2",
        "unist-util-map": "^1.0.5",
        "unist-util-remove": "^1.0.3",
        "unist-util-visit": "^1.4.1"
      },

remark-math changelog

https://github.com/remarkjs/remark-math/releases/tag/4.0.0

9b4b3c3 Update for micromark in remark@13 (breaking, this update will not work with remark lower than v13, and see commit for other changes)

So remark-math(>= 4.0.0) not work as expected with gatsby-plugin-mdx !

cc @wardpeet @cangSDARM

iChenLei commented 2 years ago

@cangSDARM Why close this issue ? This is still a problem for gatsby user, we need fix it.

cangSDARM commented 2 years ago

There are many issues mentioned because of this dependency version. Although the problem is presented in a different way. @iChenLei If necessary, I will keep it

LekoArts commented 2 years ago

We're working on ESM support this quarter (https://github.com/gatsbyjs/gatsby/discussions/31599) which will unblock MDX v2 (https://github.com/gatsbyjs/gatsby/discussions/34421) which in turn will unblock updating remark. Please watch these topics/our release notes on updates for this.

Thus I'll close this as it's blocked by ESM.

0p3r4t0r commented 2 years ago

After a lot of frustration I found a workaround. The source article is in Japanese, but the steps are easy to follow.

  1. Install the following

    npm install remark-math@3.0.1 rehype-katex@5.0.0

  2. gatsby-config.ts

    module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-mdx',
      options: {
        remarkPlugins: [
          require('remark-math'),
        ],
        rehypePlugins: [
          require('rehype-katex'),
          // If you want to pass options as a tuple.
          // [require('rehype-katex'), { strict: 'ignore' }],
        ],
      }
    }
  ]
}

  3. gatsby-broswer.ts

      import 'katex/dist/katex.min.css'