MathJax integration? about fusuma HOT 16 CLOSED

Adding first-class support for LaTeX Math syntax is something yearning for those who make academic slides.
I would like to work on this if you give the go-ahead.

from fusuma.

I implemented this on #124.

from fusuma.

fm, I don't think it doesn't execute when you specify the URL because I don't set webpackIgnore: true.

webpack/webpack#8341

from fusuma.

@galeone Could you try the module at your local like a file protocol?

extends:
  js: index.js

// index.js

import 'MathJax.js'; // I'm not sure the name, so please see the module name

from fusuma.

Perhaps is too complex, since MathJax is not designed to work well as a node module.

I've tried by placing the Javascript file locally (and all the other required js files), and it loads correctly. However, it is not able to parse the page and render the LaTeX equations.

I fallback using images in the meantime

from fusuma.

How about this? https://github.com/wko27/react-mathjax
Fusuma provides mdx, so you can use react components.

from fusuma.

I don't use LaTex so I don't know use-case but if someone wants to this feature, I'll merge it.:)

@uetchy Could you try it?

from fusuma.

I'm not a node/js developer (and I'm out of the loop of the new JS framework/components like react/mdx/...) but I'd love to have this feature in fusuma - @uetchy if you work on this it will be great

from fusuma.

Digging into it a little while, I've just realized there is an upcoming version of MathJax (MathJax v3). Turned out that MathJax v3 is so nice that it works smoothly on both Node.js and browsers. That is a great match for Fusuma!

I made a working example of TeX to SVG conversion using MathJax v3 beta.4 published on npm. It looks simpler than the current version and yes, no external dependencies!

However, to adopt that version of MathJax, we have to wait a couple of time when it is released😐

from fusuma.

@hiroppy
Also, suppose we already have support, where should we put this on?
I did a quick search and found that babelrc.js contains Prism.js dependencies, but not sure if it is a suitable place for MathJax as well.

from fusuma.

@uetchy Thank you for investigation. Could you explain how to use MathJax in the slide? For example, MathJax is in only inline-block(code-block) or not?
And do we have to convert from md to svg?

from fusuma.

MathJax is basically just a LaTeX notation but only for mathematics. And it usually comes with $ or $$ like Markdown's code-blocks ` and ``. So there are both inline and block notation available.
MathJax will extract them and convert it into SVG or HTML.

$ \sum^N_i x_i $ is inline notation

$$ \sum^N_i x_i $$ is block notation

One of the examples of the combination of Markdown and MathJax is this article (rendered result is here).

There are three options we have:

1. Replace math equations with SVG
2. Replace math equations with PNG (external or data scheme) which is converted from SVG
3. Replace math equations with image tags such that src is of equation converter's URL such as Math API

What do you think of the options?
@hiroppy

from fusuma.

Thank you for the explanation! fm, I prefer 1. Or can we convert to base64, because if MathJax code is small, we might be better to insert to javascript directly?

from fusuma.

@hiroppy That was so nice!
PR includes KaTeX which is one alternative to MathJax and it's still ok because both libraries are fast and reliable for production use.

from fusuma.

Great! I'm adding some comments to the PR

from fusuma.

If you aren't satisfied with LaTex(e.g. syntax, etc...), please reopen this issue.

from fusuma.