When I started blogging on Wix, I quickly realized rendering mathematic symbols would not be straightforward. By understanding why Tex and Latex don't work in Wix, I found 2 solutions. In this post I'll explain why and how I searched for mathematic symbol support. Then I will compare two options to display mathematic symbols in a Wix blog. Both options happen to use Mathjax.
Background
One of the reasons people use a platform like Wix is we don't want to build or manage our own content management system. However, if the platform you choose doesn't support your types of content, then integrating content can be difficult. When I started my blog and was working on the values article, I quickly found that equations are not natively supported in Wix. This was a tough blow because I had written the article in Microsoft Word which in my opinion has wonderful support for equations.
Originally I thought this lack of support would not be a blocker because HTML is allowed in blogs. I reasoned I could render something like Tex equations on the blog. Here's what happens when you try to render Latex in a wix blog:
Example 1: Latex using Mathjax [1]
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJax-script" asyncsrc="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
<p>
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</p>Due to some google searches, I could confirm others were having the same difficulties. After further research I read that \ is a special character in Wix's content management system. Since each item on a blog is stored in the content management system it will be hard to allow \ to have a meaning other than \. At this point I briefly gave up and resolved to read about alternative equation rendering to LaTex and Mathjax. Soon afterwards I began working again and read about Mathjax's MathML and asciimathml support.
How to render equations with Mathjax
Use MathML via Mathjax
Use asciimathml via Mathjax (This was the option I chose)
Now I'll show examples of each working in a Wix blog and discuss some limitations to using these tools on Wix.
1. MathML example and limitations
Here's we see how to render a form of Schrodinger's equation with MathML. This is very long so don't feel bad scrolling past the code.
<!DOCTYPE html>
<html>
<head>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/mml-chtml.js"></script>
</head>
<body>
<em><math xmlns="http://www.w3.org/1998/Math/MathML"><mrow>
<!--lhs-->
<mi>i</mi>
<mi>ℏ</mi>
<mfrac>
<mo>∂</mo>
<mrow>
<mo>∂</mo>
<mi>t</mi>
</mrow>
</mfrac>
<!--lhs wave function-->
<mi>Ψ</mi>
<mfenced open="(" close=")" seperator=",">
<mi>x</mi>
<mi>t</mi>
</mfenced>
<mo>=</mo>
<!--rhs-->
<mfenced open="[" close="]" separators="">
<mn>-</mn>
<mfrac>
<mrow>
<msup>
<mi>ℏ</mi>
<mn>2</mn>
</msup>
</mrow>
<mrow>
<mn>2</mn>
<mi>m</mi>
</mrow>
</mfrac>
<!-- second order term-->
<mfrac>
<mrow>
<msup>
<mo>∂</mo>
<mn>2</mn>
</msup>
</mrow>
<mrow>
<mo>∂</mo>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
</mrow>
</mfrac>
<mo>+</mo>
<mi>V</mi>
<mfenced open="(" close=")" seperator=",">
<mi>x</mi>
<mi>t</mi>
</mfenced>
</mfenced>
<!--rhs wave function-->
<mi>Ψ</mi>
<mfenced open="(" close=")" seperator=",">
<mi>x</mi>
<mi>t</mi>
</mfenced>
</math></em>
</body>
</html>Here are my takeaways. Even though this required a lot of code, MathML is an HTML standard so if you're project is intending to live for tens of years, then it's probably better to use MathML. Also you can reduce the amount of code by using a different format of MathML called Content MathML (not this is still nowhere near as concise as asciimathml).
Additionally, this format does not rely on \ so all of the mathematical symbols can be rendered on a Wix blog.
[3][2][1]
2. Asciimathml example and limitations
And now I render Schrodinger's equation a different way.
<!DOCTYPE html>
<html>
<head>
<script>
MathJax = {
loader: {load: ['input/asciimath', 'output/chtml']}
}
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/startup.js">
</script>
<body>
<em>
`iℏdel/(delt)Psi(x,t)=
[-(ℏ^2)/(2m)(del^2)/(delx^2)+V(x,t)]Psi(x,t)`
</em>
</body>
</html>Wow! That is so concise!
Even though asciimathml may not be a standard it appears to be built on the standard: "The resulting page can be displayed with any browser that can render MathML."[5] The takeaway from this quote for me is that asciimathml is built on top of MathML. That means asciimathml equations won't break unless MathML does a major version upgrade and ascimmathml has no maintainers. This would probably give anyone at least a year to convert their existing articles into a new format.
I had one other concern the asciimathml △ symbol depends on a \. However asciimathml allows interchangeability with LaTex so this may work anyways. Let's see:
<body>
<em>`/_\`</em>
<em>`triangle`</em>
</body>Interestingly these both work. Asciimathml is not limited by whatever is breaking LaTex.
[4][1]
Asciimathml vs MathML
I don't think this is much of a contest. Asciimathml is so much more concise, it's worth potentially needing a rewrite later. I did not notice a performance difference between the two options. But I did not investigate performance anyway other than visually.
Do you have equations in your Wix blog or have a preference between these two tools? Let me know in the comments and thanks for reading till the end.
References:
[1] The MathJax Consortium, "Writing Mathematics for MathJax," 4 September 2019. [Online]. Available: http://docs.mathjax.org/en/latest/basic/mathematics.html. [Accessed 9 January 2021]
[2] D. I. Scully, "A Begginer's Guide to MathML," [Online]. Available: http://danielscully.co.uk/projects/mathml-guide/brackets.php. [Accessed 09 January 2021].
[3] R. Ausbrooks, S. Buswell, D. Carlisle, G. Chavchanidze, S. Dalmas, S. Devitt, A. Diaz, S. Dooley, R. Hunter, P. Ion, M. Kohlhase, A. Lazrek, P. Libbrecht, B. Miller, R. Miner, C. Rowley, M. Sargent, B. Smith, N. Soiffer, R. Sutor and S. Watt, "Mathematical Markup Language (MathML) Version 3.0 3rd Edition," 21 November 2014. [Online]. Available: https://www.w3.org/Math/draft-spec/. [Accessed 09 January 2021].
[4] http://asciimath.org [Accessed 09 January 2021].
"But I really want Latex"
Okay this isn't something I feel so strongly about but maybe using Wix's Javascript support, you can trigger Mathjax to process Tex using the Mathjax.typeset function. This would definitely be valuable many people have libraries worth of Tex code.
There's also hope that some form of escaping may enable LaTex. I only realized that may in fact be possible after seeing the asciimathml triangle work. I don't plan on testing this out too much but you can.