remark-remark-katex replaces LaTeX math with wrong html

Description

I am trying to make Gatsby render LaTeX math formulas in my blog posts.

I’m using the standard gatsby-transformer-remark with gatsby-remark-katex plugin configured as follows:

From gatsby-config.js (full code available here):

module.exports = {
  siteMetadata: {
    title: `Personal blog of Boris Burkov`,
    author: `Boris Burkov`,
    description: `A personal blog of Boris Burkov, version 4.1, this time written in Gatsby.`,
    siteUrl: `https://borisburkov.net/`,
    social: {
      telegram: `BorisBurkov`,
    },
  },
  plugins: [
      ...
      {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          ...
          {
            resolve: `gatsby-remark-katex`,
            options: {
              // Add any KaTeX options from https://github.com/KaTeX/KaTeX/blob/master/docs/options.md here
              strict: `ignore`
            }
          }
          ...
        ]
      ...
    ],
};

In the markdown of my blog posts I’m using both inline math and display-mode math like this:

If we assume for a second that HDD failures were independent, then probability of
a failure of X drives at the same time corresponds to Poisson distribution:

$$
p(failure of 1 HDD) = 10^{-5}
$$

$N(HDD) = 2400$

In the resulting html page these math formulas are strangely converted to the following incorrect html:

<div class="math math-display katex">p(failure of 1 HDD) = 10^{-5}</div>

Now, if I go to the source code of gatsby-remark-katex/index.js and add check, if it sees my inline math and if it replaces it with proper html, I see that it actually does. I add console.log('node.value = ${node.value}') statement to the code:

gatsby-remark-katex/index.js

"use strict";

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
    });
    console.log(`node.value = ${node.value}`)
  });
  visit(markdownAST, `math`, node => {
    node.type = `html`;
    node.value = katex.renderToString(node.value, {
      displayMode: true,
      ...pluginOptions
    });
  });
};

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

When I say gatsby develop, in the console I see the expected html for math formulas, rendered by katex:

node.value = <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>N</mi><mo stretchy="false">(</mo><mi>H</mi><mi>D</mi><mi>D</mi><mo
stretchy="false">)</mo><mo>=</mo><mn>2400</mn></mrow><annotation encoding="application/x-tex">N(HDD) = 2400</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut"
style="height:1em;vertical-align:-0.25em;"></span><span class="mord mathnormal" style="margin-right:0.10903em;">N</span><span class="mopen">(</span><span class="mord mathnormal" style="margin-right:0.08125em;">H</span><span
class="mord mathnormal" style="margin-right:0.02778em;">D</span><span class="mord mathnormal" style="margin-right:0.02778em;">D</span><span class="mclose">)</span><span class="mspace"
style="margin-right:0.2777777777777778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span></span><span class="base"><span class="strut"
style="height:0.64444em;vertical-align:0em;"></span><span class="mord">2</span><span class="mord">4</span><span class="mord">0</span><span class="mord">0</span></span></span></span>

Problem is that html wouldn’t show up in the resulting page. It wouldn’t appear in GraphQL of the page in html or htmlAST field either, if I go to query the GraphiQL for it:

Here’s the page output, note the un-rendered formulae:

Steps to reproduce

Full source code of my Gatsby 3-based blog is available here: https://github.com/BurkovBA/BurkovBA.github.io.git.

git clone https://github.com/BurkovBA/BurkovBA.github.io.git
nvm use 15
npm install
npm run develop
browser http://localhost:8000/2021-03-11-1/

Expected result

I expected LaTeX formulas rendered in the lower part of my latest blog post: http://localhost:8000/2021-03-11-1/ as the following html:

<span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>N</mi><mo stretchy="false">(</mo><mi>H</mi><mi>D</mi><mi>D</mi><mo
stretchy="false">)</mo><mo>=</mo><mn>2400</mn></mrow><annotation encoding="application/x-tex">N(HDD) = 2400</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut"
style="height:1em;vertical-align:-0.25em;"></span><span class="mord mathnormal" style="margin-right:0.10903em;">N</span><span class="mopen">(</span><span class="mord mathnormal" style="margin-right:0.08125em;">H</span><span
class="mord mathnormal" style="margin-right:0.02778em;">D</span><span class="mord mathnormal" style="margin-right:0.02778em;">D</span><span class="mclose">)</span><span class="mspace"
style="margin-right:0.2777777777777778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span></span><span class="base"><span class="strut"
style="height:0.64444em;vertical-align:0em;"></span><span class="mord">2</span><span class="mord">4</span><span class="mord">0</span><span class="mord">0</span></span></span></span>

Actual result

LaTeX is not rendered, but just replaced with pretty useless divs:

<div class="math math-display">p(failure of 1 HDD) = 10^{-5}</div>

Environment

  System:
    OS: macOS 11.1
    CPU: (8) arm64 Apple M1
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 15.14.0 - ~/.nvm/versions/node/v15.14.0/bin/node
    npm: 7.12.1 - ~/.nvm/versions/node/v15.14.0/bin/npm
  Languages:
    Python: 3.9.2 - /Users/burkov/miniforge3/bin/python
  Browsers:
    Safari: 14.0.2
  npmPackages:
    gatsby: ^3.4.2 => 3.4.2 
    gatsby-plugin-feed: ^3.4.0 => 3.4.0 
    gatsby-plugin-google-analytics: ^3.4.0 => 3.4.0 
    gatsby-plugin-image: ^1.4.1 => 1.4.1 
    gatsby-plugin-manifest: ^3.4.0 => 3.4.0 
    gatsby-plugin-offline: ^4.4.0 => 4.4.0 
    gatsby-plugin-react-helmet: ^4.4.0 => 4.4.0 
    gatsby-plugin-sass: ^4.4.0 => 4.4.0 
    gatsby-plugin-sharp: ^3.4.2 => 3.4.2 
    gatsby-plugin-styled-components: ^4.4.0 => 4.4.0 
    gatsby-plugin-typography: ^3.4.0 => 3.4.0 
    gatsby-remark-copy-linked-files: ^4.1.0 => 4.1.0 
    gatsby-remark-embed-gist: ^1.2.1 => 1.2.1 
    gatsby-remark-images: ^5.1.0 => 5.1.0 
    gatsby-remark-katex: ^5.1.0 => 5.1.0 
    gatsby-remark-prismjs: ^5.1.0 => 5.1.0 
    gatsby-remark-responsive-iframe: ^4.1.0 => 4.1.0 
    gatsby-remark-smartypants: ^4.1.0 => 4.1.0 
    gatsby-source-filesystem: ^3.4.0 => 3.4.0 
    gatsby-transformer-remark: ^4.1.0 => 4.1.0 
    gatsby-transformer-sharp: ^3.4.0 => 3.4.0 
  npmGlobalPackages:
    gatsby-cli: 3.4.1

No flags inside gatsby-config.js.

[LekoArts]

Closing as a duplicate of https://github.com/gatsbyjs/gatsby/issues/30865

[hendra-go]

This might be duplicate #30865