Issue with rendering mathematical formulas using myst-to-react MATH_RENDERERS

[HaudinFlorence]

Hello,
I am note sure if this is the right place to ask. I am working on a react app and I am trying to render a math directive using myst-to-react. The only way I managed to get the mathematical formula rendered (with katex classes) was with using a modified version of the MATH_RENDERERS provided by myst-to-react in /src/math.tsx . What I basically did is using the Math function that is commented in the current available version on myst-to-react and produced a simplified MATH_RENDERERS:

function Math({ value, html }: { value: string; html: string }) {
  const [loaded, setLoaded] = useState(false);
  const ref = useRef<HTMLDivElement | null>(null);
  useEffect(() => {
    import("katex").then(() => {
      setLoaded(true);
    });
  }, []);
  useEffect(() => {
    if (!loaded) return;
    import("katex").then(({ default: katex }) => {
      if (!ref.current) return;
      katex.render(value, ref.current, { displayMode: true });
    });
  }, [loaded, ref]);
  return (
    <>
      {(typeof document === "undefined" || !loaded) && (
        <div dangerouslySetInnerHTML={{ __html: html }} />
      )}
      {loaded && <div ref={ref} />}
    </>
  );
}

type MathLike = (InlineMath | Math) & {
  error?: boolean;
  message?: string;
  html?: string;
};

const mathRenderer: NodeRenderer<MathLike> = ({ node }) => {
  return <Math html={node.html} value={node.value as string} />;
};

const MATH_RENDERERS = {
  math: mathRenderer,
  inlineMath: mathRenderer,
};

export default MATH_RENDERERS;

Can you please give me some hints about the way I can use the original version of MATH_RENDERERS and get the formulas rendered ? Right now, it seems that I always fell under this condition (with the red exclamation icon and the text of the formula underneath):

if (node.error || !node.html) {
      return (
        <pre title={node.message}>
          <span className="text-red-500">
            <ExclamationCircleIcon width="1rem" height="1rem" className="inline mr-1" />
            {node.message}
            {'\n\n'}
          </span>
          {node.value}
        </pre>
      );
    }

Many thanks in advance for any help or advice.

[rowanc1]

Hi @HaudinFlorence -- thanks for the question. The current math render is commented out as this is currently done in the transform (which is done in the CLI and the HTML output is provided to the web-client without having to have the katex rendering javascript loaded). This allows a slightly faster load, but is a bit unintuitive.

To use that transform you can npm install myst-transforms and use the mathPlugin (or transform). The transform does a few more things in terms of removing/adding labels and reacting to a few common latex problems that are automatically fixable. The transform code is here:

https://github.com/executablebooks/mystjs/blob/main/packages/myst-transforms/src/math.ts#L280

If you are looking to do this client side, you can also provide your own renders (i.e. the commented out directives), which will add a dependency of katex to the frontend as you are doing now.

[rowanc1]

Just saw: https://github.com/HaudinFlorence/simple-myst-react-app So cool! :)

If you are looking for inspiration there is also this component which might be worth looking at!

https://github.com/executablebooks/myst-theme/blob/main/packages/myst-demo/src/index.tsx

That is what powers the demos on mystmd.org.

[HaudinFlorence]

@rowanc1 Thanks for your quick answer and pointers. At the moment, I am not sure how to use the mathPlugin nor the MystDemoRenderer. I need to go deeper into the way they are working.

[rowanc1]

After you parse the markdown and get a tree, you can take that tree through a series of transformations.

In your repo after this line:
https://github.com/HaudinFlorence/simple-myst-react-app/blob/d78446f10b54c1a5129c6b9f1b686fe6369e68be/src/App.tsx#L21

You can apply a transform, something like this (haven't tested, but should give you an idea I hope!):

import { VFile } from 'vfile';
import { mathTransform } from 'myst-transforms';

const vfile = new VFile(); // used for logging error messages
mathTransform(tree, vfile, { macros: {} });

The plugin can be used in a unifiedjs pipeline (see https://unifiedjs.com/), which sometimes is a nice way to string these together. If you don't want to use that, the mathTransform is all that is called in the pipeline. After that transformation, the tree should now have the math working, and can be rendered by the default renderers. There are other transformations that you will need if you extend into cross-references and numbering as well. Let us know as you progress your app!

[HaudinFlorence]

Hello. Thanks @rowanc1 for the explanations. It worked for the math transform 👍🏻 . I will rather focus on using the transforms instead of using the plugins. But then I guess that conditions will be needed to differentiate between the different directives and transforms to be applied in each case. Up to now I have not managed to render the labels in equations, figures or tables / target directives. I tried with a combination of:

 liftMystDirectivesAndRolesTransform(tree)
 mystTargetsTransform(tree)

I need to investigate more in details the right order in which to use the transforms.

[HaudinFlorence]

Hello. After some more testing, I am not sure I understand how to deal with the label/identifier of the equations/figures/images/tables/target directives. I proceeded to some console.log for what is done with the liftMystDirectivesAndRolesTransform but I did not observe any change in the tree I tested supposed to be this one:

```{figure} https://source.unsplash.com/random/500x200/?mountain
:name: my-fig
:align: center

Check out [](#my-fig)!!
```

I would have expected a lift and a node removal. But maybe I got confused.
Thanks for any pointer to some more informations/ examples/ possible available documentation.

Maybe using the plugins is more suitable than using the transforms ?