When I started blogging on Wix, I quickly realized rendering mathematic symbols would not be straightforward. In this post I'll explain why and how I searched for mathematic symbol support. Then I will compare two alternatives to tex for displaying mathematic symbols in a Wix blog. All 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. Before dpvc33 commented, I thought latex didn't work, but turns out I just forgot a space.
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" async src="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>While I was having issues rendering tex, I confirmed others were having the same difficulties. After further research I read that \ is a special character in Wix's content management system. I'll share more at the end on how I tried to break Wix rendering using that information. However attempting to 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. At the end of this post I'll also share some failed attempts to break equation rendering with special characters.
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 apparent special characters.
[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].
In your LaTeX example, the script that loads MathJax is missing the space between "async" and "src", so you have the attribute "asyncsrc", which is ignored. So you never load MathJax into that iframe. I suspect that if you addd the space, it would also work just like the other two input formats.