Getting MathJax to work with Wix

This was annoying enough to write down. Someone else has already started on the topic, luckily, but I wasn't super happy with having to embed HTML every time I wanted to include an equation on my blog. Both services, AsciiMath and MathJax try and make it extremely easy for you to use their program. Wix of course, wants to go and screw it up for ya. Part of the issue, as already pointed out by Nate Davis, is that Wix seems to like holding on the '\' character and refuses to let it go. I'm not sure why, but AsciiMath's approach wasn't working for me when I was trying to include their script in a site-wide script. Might be the next thing to figure out, but for now I'm just trying to get MathJax working since it seems the closest.

Actually, as it turns out, MathJax includes AsciiMath as sort of an interface now. So, all I have to worry about is getting MathJax working. This was really a huge pain, and took most of the day to figure out. The basic isssue is that Wix sort of seems to reload the text of a page even after it's loaded once or twice, I have no idea why. This messes with how equations are created, since MathJax will see them the first time they are loaded, convert them to a pretty equation, and forget about them. I tried a number of approaches to try and get MathJax to load later, once all the operations were done, and that's what took the longest time. Wix provides some neat sort of simplified Javascript api for you, but doesn't give you any tools to work with scripts through that system. Your only option to work with DOM-capable scripts is to include them in the header or body of your HTML.

One thing I did discover, and I'm very proud of this, is you can send a message event from Wix's "Velo" API and recieve it from a normal javascript script. I used this to try and use their API "onReady" event to trigger the loading of MathJax, which was later than all the other approaches I had tried but still caused the equations to disappear after a second once the page loaded a second time. Ultimately I stumbled upon "MutationObservers", and decided to use them to brute force the issue. Now, I have a script simply listening for updates to the blog post itself and will tell MathJax to try re-typesetting each time there's an update. Inefficient? Maybe. Does it work? Seems to!

`sum_(i=1)^n i^3=((n(n+1))/2)^2`

These can be put inline (`x = 1/y`), and aren't iframe'd HTML pages like the other approach takes. I'm not sure how far I can take this, since I'm not super familiar with AsciiMath's interface, but it seems quite powerful for just blog post stuff. Hopefully you'll be seeing more content with fancy equations soon.

Mutation Observers

This was a great help, and I basically just used their example code: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver. It took me a minute to remember that I had to wait for the blog post to load in the first place, and the observer was error'ing and complaining it couldn't find anything by the requested id. Oops.

The code

This isn't the prettiest formatting of it, but I'm sure that if someone finds this post they would be extremely annoyed if I didn't include anything meaningful about my solution besides a description.

And this is what the two scripts look like in the custom code section. Note that I have both of them set to only run on blog posts.

More Math!

Okay so it'd be a bit sad if I didn't stretch this out a bit more. The AsciiMath website is quite short and has a basic overview of all the stuff you can do. What about trying some integrals?

`int_1^10 e^{2x} dx`

Seems to work alright! One annoying thing is that if I preview the results in the same window, the editor starts to bug out and you have to reload it. A problem for another time, I think. Anyone know this one? Hopefully I copied it right !

`X(k) = sum_(n=0)^(N-1) x_n e^((−2πikn)/N)`

It seems to even take into account the font size and the alignment of the original text, which is really nice.