upgrading to gatsby-remark-katex v5.0.0 and/or gatsby-transformer-remark v4.0.0 breaks katex math equation

[kimbaudi]

upgrading to gatsby-remark-katex v5.0.0 and/or gatsby-transformer-remark v4.0.0 breaks katex math equation

When I use gatsby-remark-katex v4.2.0 and gatsby-transformer-remark v3.2.0, katex math equations are working correctly

But when I update to the latest gatsby-remark-katex v5.0.0 and gatsby-transformer-remark v4.0.0, katex math equations no longer work

Steps to reproduce

I've created a minimal repo at https://github.com/kimbaudi/gatsby-remark-katex-issue. If you yarn install && yarn start, it will work. But if you update to the latest gatsby-remark-katex v5.0.0 and gatsby-transformer-remark v4.0.0, it will no longer work.

Expected result

What should happen?

updating to the latest gatsby-remark-katex v5.0.0 and gatsby-transformer-remark v4.0.0 should not break katex math equation

Actual result

What happened.

updating to the latest gatsby-remark-katex v5.0.0 and gatsby-transformer-remark v4.0.0 breaks katex math equation

Environment

System:
OS: Windows 10 10.0.19041
CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
Binaries:
Node: 14.15.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
npm: 7.9.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 89.0.4389.128
Edge: Spartan (44.19041.906.0), Chromium (89.0.774.76)
npmPackages:
gatsby: ^3.3.0 => 3.3.0
gatsby-remark-katex: ^4.2.0 => 5.0.0
gatsby-source-filesystem: ^3.3.0 => 3.3.0
gatsby-transformer-remark: ^3.2.0 => 4.0.0
npmGlobalPackages:
gatsby-cli: 3.2.0

[hendra-go]

Hello,
I also faced this problem.

I also found solution that work for my use case, even though no so elegant.
with the help of unified and rehype-parse

i changed gatsby-remark-katex from this:

const visit = require(`unist-util-visit`)
const katex = require(`katex`)
const remarkMath = require(`remark-math`)

module.exports = ({ markdownAST }, pluginOptions = {}) => {
  visit(markdownAST, `inlineMath`, node => {
    node.type = `html`
    node.value = katex.renderToString(node.value, {
      displayMode: false,
      ...pluginOptions,
    })
  })

  visit(markdownAST, `math`, node => {
    node.type = `html`
    node.value = katex.renderToString(node.value, {
      displayMode: true,
      ...pluginOptions,
    })
  })
}

module.exports.setParserPlugins = () => [remarkMath]

to this:

const visit = require(`unist-util-visit`)
const katex = require(`katex`)
const remarkMath = require(`remark-math`)
const unified = require("unified")
const parse = require(`rehype-parse`)

module.exports = ({ markdownAST }, pluginOptions = {}) => {
  const parseHtml = unified().use(parse, { fragment: true, position: false })

  visit(markdownAST, `inlineMath`, node => {
    const renderedKatexString = katex.renderToString(node.value, {
      displayMode: false,
      ...pluginOptions,
    })
    node.data.hChildren = parseHtml.parse(renderedKatexString).children
  })

  visit(markdownAST, `math`, node => {
    const renderedKatexString = katex.renderToString(node.value, {
      displayMode: false,
      ...pluginOptions,
    })
    node.data.hChildren = parseHtml.parse(renderedKatexString).children
  })
}

module.exports.setParserPlugins = () => [remarkMath]

[kimbaudi]

@hendra-go sorry for the late response. I finally got a chance to try your solution of modifying gatsby-remark-katex plugin so it uses unified and rehype-parse and the math equations works on my minimal repo: https://github.com/kimbaudi/gatsby-remark-katex-issue

The reason for katex math equations breaking after upgrading to the latest gatsby-remark-plugin v5.0.0 is because the plugin now uses the latest remark-math v4.0.0 whereas prior versions (i.e., gatsby-remark-plugin v4.2.0 or less) was using remark-math v1.0.6.

[kimbaudi]

gatsby-remark-katex v5.0.0 or greater needs to be updated using unified and rehype-parse as suggested by @hendra-go since its now using remark-math v4.0.0.

[kimbaudi]

@hendra-go your solution works, but I found a minor typo. you need to make sure to set displayMode to true for math nodes. Otherwise, it will display inline since katex-display class won't be added.

change this:

  visit(markdownAST, `math`, node => {
    const renderedKatexString = katex.renderToString(node.value, {
      displayMode: false,
      ...pluginOptions,
    })
    node.data.hChildren = parseHtml.parse(renderedKatexString).children
  })

to

  visit(markdownAST, `math`, node => {
    const renderedKatexString = katex.renderToString(node.value, {
      displayMode: true,
      ...pluginOptions,
    })
    node.data.hChildren = parseHtml.parse(renderedKatexString).children
  })

[kimbaudi]

So this issue is resolved for me by using a local plugin (literally copy/paste from gatsby-remark-katex plugin) that uses unified and rehype-parse as suggested by @hendra-go. You can check out the latest commit on my minimal repo: https://github.com/kimbaudi/gatsby-remark-katex-issue

Since the issue is resolved for me, I can close this. But I would much rather keep it open until it is actually fixed in gatsby-remark-katex plugin.

[kimbaudi]

I've deleted my minimal repo and added a zip

gatsby-remark-katex-issue-main.zip

[amitash]

@kimbaudi can you submit a PR so that the changes can be merged?

[BurkovBA]

@LekoArts @amitash Ok, seems like I'm the most interested guy in getting this one fixed and have more spare time than the others.

I tried the solution by @kimbaudi as a local plugin, and it worked (see: #31427).

But when I try to apply the same changes directly in the plugin code, distributed with node_modules, it would crash. I don't get, why the same code works in a local plugin, but not in a node_modules-distributed plugin?

Other than that I'm ready to submit @kimbaudi's code as a PR.