Support MathJax for chat messages!

[ghost]

This is a feature request, which I'll admit is probably not too important for most users.

I think it would be really amazing if text in between $dollar signs$ could be rendered as inline math formulas using MathJax, similar to what you see on some of the stackexchange sites. It's also common to use $$double dollar signs$$ to denote full equation blocks.

This may obe an easy addition, seeing as markdown is already supported. With names like "matrix" and "vector", there's bound to be at least a small subset of users who actually use this chat client to talk about math! It's hopefully at least worth considering, anyway.

[thosgood]

As another suggestion, would it be possible to realise a solution via an integration? That is, find some safe server-side way of compiling LaTeX (of which there seem to be many) and just provide an integration with such a service?

[uhoreg]

Yes, it should be pretty easy to write a bot that responds to, say, !math x^2+1 with an image of the math. You could write a service that uses MathJax/KaTeX and something like phantomjs to create the image. It wouldn't be ideal, but it could be a quick way to get math support, and would probably be enough for a lot of people.

[thosgood]

Yes, it should be pretty easy to write a bot that responds to, say, !math x^2+1 with an image of the math. You could write a service that uses MathJax/KaTeX and something like phantomjs to create the image. It wouldn't be ideal, but it could be a quick way to get math support, and would probably be enough for a lot of people.

ok, I'd be happy to look into this. are there any resources on writing bots/integrations for riot? I agree that it's not ideal, but I really think it would suffice for most uses.

[saad440]

Ideally we should have some support in at least Riot itself but a bot can certainly fill in the gaps till we sort that out.

[uhoreg]

are there any resources on writing bots/integrations for riot?

There are bot frameworks for different languages. https://github.com/matrix-org/go-neb is the one that powers all the other bots in Riot's default "Manage integrations" button. For JavaScript, https://matrix.org/docs/guides/usage-of-matrix-js-bot-sdk may be a good choice. Other libraries you can use are listed at https://matrix.org/docs/projects/sdks

[thosgood]

So I wrote a quick bot (https://github.com/thosgood/matrix-maths-bot) that can reply to !latex ... with a PNG of the maths rendered, but it's not entirely satisfying — the main thing that people [weasel words] want is the ability to have inline maths, i.e. rendered maths in the middle of a sentence.

I've been thinking about matrix-doc#1722 and really believe that the second suggestion (the so-called LaTeX method with <mx-math> tags) is ideal, and rendering should be done with KaTeX. The point, though, is (as previously mentioned) that the choice of KaTeX vs. MathJax can be entirely client-side, once a Matrix method format is decided upon. If anything, I really think that just sending something even less than the suggested spec would suffice, such as

{
  "content": {
    "body": "This is an equation: $\\sin(x)=\\frac{a}{b}$",
    "format": "org.matrix.custom.html",
    "formatted_body": "This is an equation: <mx-math>\\sin(x)=\\frac{a}{b}</mx-math>",
    "msgtype": "m.text"
  },
  "event_id": "$eventid:example.com",
  "origin_server_ts": 1234567890
  "sender": "@alice:example.com",
  "type": "m.room.message",
  "room_id": "!soomeroom:example.com"
}

since this would be easy to render in a client — from what I can tell, it would really just be a case of (for example) adding a KaTeX dependency and the relevant CSS file (there is even react-katex.)

[thosgood]

Edit: this is now a pull request (https://github.com/matrix-org/matrix-react-sdk/issues/3251).

Inspired by @hgustafsson 's proof-of-concept, below is a fork which has functional maths integration:

• https://github.com/thosgood/matrix-react-sdk
• https://github.com/thosgood/riot-web (just added the KaTeX CSS file)

The idea is that “math mode” can be toggled on and off in the message composer, just like for Markdown. When on, it just makes the message send with format org.matrix.custom.html. There is then a global/room setting for KaTeX rendering, which renders the mathematical content, with nice error support and all these sorts of things that KaTeX does so well.

When the Matrix proposal for how to send mathematics is finalised, it could easily be implemented simply by changing the format that the math mode sends messages as (e.g. org.matrix.custom.math or something); similarly, the KaTeX rendering could be replaced with another method if desired.

Unlike some of the previous proposals, I opted, in the case of KaTeX rendering being disabled, to simply send the source code (e.g. $xy=z$), because this is how “most” people are used to seeing such things anyway. Again, if there were some other nice fallback method, then I think it wouldn’t be too hard to implement.

The only problem that I have with this fork is that I can't seem to get the per-room/per-room-account setting to work: I just don't understand the settings model well enough. So if anybody has any suggestions on how to fix this (or, indeed, any other comments at all) then please do let me know.

[uhoreg]

https://github.com/matrix-org/matrix-doc/pull/2191 is a counter-proposal to https://github.com/matrix-org/matrix-doc/pull/1722 that uses LaTeX instead of MathML.

[ara4n]

lots of experimentation going on currently on this between @thosgood, @Cadair, myself with input from @uhoreg. Approaches are split between experiments with render-at-receiver-client (https://github.com/matrix-org/matrix-react-sdk/pull/3251), render-at-sender-client, and render-at-sender-mediarepo (or combinations of all 3).

Before I lose it, https://jsfiddle.net/8Logkhr5/35/ is a POC for render-at-sender-client via MathJax.

[acxz]

Sorry to bump this but I was wondering what the status of this feature is at and when we can expect it to land on develop?

[erdnaxe]

From the user perspective, render-at-sender-client will fill the media history of a room, and requires much more space server-side. I find KaTeX (or other equivalent) fast enough to be used on large rooms, so the render-at-receiver-client approach seems better.

I would really like to see this feature in develop in the following weeks (my university is using Matrix to chat during lessons). How can I help ? May I rebase https://github.com/matrix-org/matrix-react-sdk/pull/3251 in matrix-react-sdk:develop as a new pull-request ?

Another way to render LaTeX is Matrix would be to have a bot uploading the rendered LaTeX but I find this approach non user-friendly.

[thosgood]

I've played around with a bot that responds to messages with the rendered image, but it really wasn't very pleasing to use, as you say. (There was another bot a while back that also did this (much better than mine), but I think the general consensus was that it was not really the best solution to this specific need).

If you wish to advance this project a bit more, then I suggest dropping by #pigeon.digital:matrix.org, where we've been having discussions about this pull request (and the issue in general). I really want to keep working on this, but sadly have a bunch of deadlines in these coming weeks that take priority. I'm still more than happy to discuss what we've done so far/ideas we had heading forwards though!

[correaswebert]

We must decide on a protocol first - https://github.com/vector-im/riot-web/issues/1945#issuecomment-511599822 seems to be nice

I agree on the fallback issue - https://github.com/matrix-org/matrix-doc/pull/1722#issuecomment-442495508 - as for security, we may initially limit their usage to those having proper safeguards, and later roll in extras

https://github.com/vector-im/riot-web/issues/1945#issuecomment-438448586 We can ask for permission to render the math henceforth if it is encountered in the message (and then add a toggle in the quick settings for those inclined toward math but also give them speed whenever needed; we may keep the toggle chat based...)

@uhoreg I want to participate in GSoC and would love to contribute towards this issue

[vale981]

Hi, I did not know about this Issue here and created a Firefox extension to inject KaTeX into riot. https://addons.mozilla.org/en-US/firefox/addon/riot-katex/ (Beware, it is quite a hack job :P)

This is of little relevance for an actual implementation in riot but may be of interest for some people who don't want to wait.

Cheers, Valentin

[thosgood]

I've mentioned this a bunch of times in the other pull request, but have apparently forgotten to do so here: this test build is actually up and running at https://pigeon.digital , and I think it's currently being used quite a bit, and I haven't had any error complaints so far! Please feel free to use it, but just note that you have to enable KaTeX rendering in your user settings, and make sure that the 'maths' toggle is turned on in the composer. (There are some per-room settings, but these don't do anything).

![Uploading Screenshot 2020-04-12 at 16.22.13.png…]()

[vale981]

Great!

[a22sc]

wouldn't it be good to make a bot that creates png's to involve bridge users and users with other clients? found this for telegram: https://github.com/vdrhtc/InLaTeXbot

[jtyard]

Great! I tried it out on https://pigeon.digital and it worked well, though I was unable to edit a post while keeping the katex formatting. Specifically,

• dollar signs were not reproduced in the edit box
• even if the dollar signs were put back in, the edited post was not processed as katex

[Esokrates]

@thosgood Any progress on this? pigeon.digital seems down to me.

[CsatiZoltan]

@Esokrates For me, this room works. This is where issues are discussed. The good news is that they are close to it!

[ArniDagur]

The current PR to watch seems to be https://github.com/matrix-org/matrix-react-sdk/pull/5244

[stites]

bump, matrix-org/matrix-react-sdk#5244 has been merged!

[jryans]

As mentioned above, we now have experimental LaTeX support available via a labs flag on Develop / Nightly builds. 🎉

Please try it out and file new issues with any feedback, as that will help us understand what's left before making this generally available.

[tobiasBora]

So I just tried it out. For that, I went on https://riot.im/develop/ and I enabled the option by going in All settings (arrow on the right of your name on the upper left part of the screen), Labs, Render LaTeX maths in messages:

See some bugs here https://github.com/vector-im/element-web/issues/15846#issuecomment-744006518

[lon91ong]

So I just tried it out. For that, I went on https://riot.im/develop/ and I enabled the option by going in All settings (arrow on the right of your name on the upper left part of the screen), Labs, Render LaTeX maths in messages: ... See some bugs here #15846 (comment)

@tobiasBora Element can't load Something went wrong and Element was unable to load.

[t3chguy]

@lon91ong check the browser console, either an extension/firewall is blocking something or your browser is missing a required feature.

[jpmvferreira]

Is this not yet available on the desktop client? I'm running element-desktop 1.7.34-1 from the Manjaro repos and I am not able to see this feature anywhere.

On the general Matrix chat a user told me that I would be able to manually configure this somewhere, in a config file, but I can't seem to find where.

[SimonBrandner]

This is implemented but experimental therefore you need to enable it in a config file. Feel free to ask in the Element Web/Desktop room for help with that

[Pankratius]

It would also be very cool to have it for the ios-app.

[tobiasBora]

Any idea how to use this feature in 2022? The url https://riot.im/develop/ does not exist anymore and this feature does not appear in the experimental features (labs) in https://app.element.io/: I can only see "Threads" and "The new search".

[turt2live]

riot.im/develop is now develop.element.io

[t3chguy]

The old URL works just fine still anyway.