Joplin: Add support for maths input

[jeanm]

If Joplin had support for maths input in LaTeX style, it would be perfect as a journal / lab book for scientists.

Ideally this would be compatible with Pandoc's implementation, MathOverflow / Math StackExchange, or Jupyter notebooks, as it is a syntax already familiar to many scientists.

[laurent22]

I'm using markdown-it for rendering and there are two plugins for Math support:

https://github.com/runarberg/markdown-it-math

https://github.com/waylonflinn/markdown-it-katex

Do you know about the syntax they use? Is one better than the other?

[cofinley]

I'd say MathJax, which seems to be the markdown editor standard.

Github
NPM

[jeanm]

Thanks for looking into this!

@cofinley's suggestion would work, but I would also look into markdown-it-katex. KaTeX is a new typesetting library built by the Khan Academy people, because MathJax was too slow for them. Look at the comparison at the bottom of their homepage: https://khan.github.io/KaTeX/ . For Joplin's use case I would expect the speed gains from using KaTeX vs MathJax to be non-trivial. Not to mention the lack of reflowing, which is something really annoying in long pages that use MathJax.

[cofinley]

@jeanm: Oh cool! I didn't know that about its background.

I agree, long document load times are very noticeable with MathJax. It looks like there was some debate on Latex features support in Katex a few years ago, but I'd imagine it's better now.

[laurent22]

The mathjax package seems to be abandoned, so it would probably be better to use a different one. Maybe the katex one then.

[laurent22]

For information, I got it working in this branch but there's some issue with the CSS which makes the fraction bar appears slightly too high. Other than that it seems to be fine.

Since it's the second most popular request, I might look at it again later, or if someone can figure out the CSS that would be great.

[laurent22]

Support for Katex is now available. I've tried with various expressions and as far as I can tell it works, but if there's any mathematician here please give it a try and let me know if something's off.

In the end I've simply used the actual Katex lib instead of the plugin as this is well supported, and it means we can get the latest fixes and improvements easily.

To add an inline equation, wrap the expression in `{.katex}EXPRESSION`, eg. `{.katex}\sqrt{3x-1}+(1+x)^2`. To create an expression block, wrap it as follow:

```katex
EXPRESSION
```

For example:

```katex
f(x) = \int_{-\infty}^\infty
    \hat f(\xi)\,e^{2 \pi i \xi x}
    \,d\xi
```

Here is an example with the Markdown and rendered result side by side:

[jeanm]

That looks brilliant!

Any chance it could use a syntax already used by other markdown engines/app, instead of a new one? Such as the pandoc one, with $$ for display and $ for inline? There is a summary table here of all the places that already support this syntax.

[laurent22]

Done, the next release will support both $ and backtick syntaxes.

[laurent22]

This is now part of the desktop version and will be in Android and iOS soon too

[hughwilliams94]

Hey sorry to reopen this but is there any chance that $ and $$ could be added to the autocomplete so that typing one inserts the other half of the pair as already happens with square brackets etc.?

[dzackgarza]

I may be missing something, but this issue says math support was added, and while I've created a note with $$ in markdown on the android app, it does not seem to render. Here's an image of what I'm seeing:

[subi54]

@dzackgarza you've to edit the note, the note will render it. That red circle with pencil on it.
You've currently copied the content into the title field. After rendering:

[dzackgarza]

Ahhh I see! I thought these were just plain markdown files, had no idea there was a title field or anything like that. Confirmed that this works, thanks.

[subi54]

@dzackgarza, your data is stored in markdown format. The Title field is there for the convenience of users. You don't actually have to use it, app takes the first line as Title as well.