I am writing this post to help people who absolutely need mathematical notation on their questions / answers, to point out my method of doing so, given SO's reluctance / inability to support MathJax on the site (heavily discussed elsewhere on meta), in the hope that other people who desperately need math might find it and use it (and for the consideration of the SO developers as an alternative to MathJax). This method is by no means 'at the click of a button', but it looks as good as MathJax 'on-paper', and is fast enough once you get the hang of it, so I use it as a workaround whenever I need latex math on SO (which is a lot more often than people seem to think, and finding out how many other users feel the same is difficult).
The downside of this method is that it relies on an image to an external link, but presumably if one uses SO's own image generating facilities, then this is a safe enough way to do it that doesn't risk having the image deleted.
See my answer here for an example that uses this method; I will be discussing the steps in more detail below.
Do the SO devs think this might be an adequate solution to the 'math notation' problem on SO, and if so implemented as an editor button?
Step 1 : Generate an image of a latex equation
Arguably this is the most difficult step if one does not have such facilities. One way to do this is using online facilities like Codecogs' online latex equation editor to generate an image. You could then link to this directly online, or preferably save the image and upload to SO in your answer, using the "Insert image" facility in the editing window.
However, my go-to method that I would recommend for this is to quickly render the equation in Anki, which then allows me to click on "Insert Picture" here, and drag and drop the generated latex image directly from my anki screen to the drag-and-drop-enabled box here. To do this in Anki, create a temporary deck, and create a temporary card in it and save it; this will act as your latex sandbox for whenever you need to generate a latex image from now on.
Now, find that card from Anki's "Browse" mode, and click on "Preview". You can now preview latex equations live as you type them. To create a latex image, simply wrap your latex code in [latex] ... [/latex]
tags. So, to generate the following image:
you would type the following code in Anki:
[latex] $$ \int _ a ^ b x ^ 2 \, \mathrm {d} x $$ [/latex]
You can then click on the "Insert image" button here, and drag and drop the generated image straight from the Anki preview box into the "Upload image" box here.
Step 2 : Upload and edit
Once you've uploaded the image, SO will include a markdown image link, and a reference below. Unfortunately, for our purposes this is the wrong format, and we will need to use a standard <img>
tag instead. Copy the imgur url that was generated by SO, remove all the image-related markdown, and create your own image tag. This now enables you to also add your preferred height (which is usually critical to control the size, especially when you want to use this image inline!), and also to add alt
and title
tags to hold your latex code, since it may be important for users to see / obtain the latex code that generated this.
Using the integral example from above, your code should go from this:
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/rIIMt.png
to something like this:
<img src="https://i.stack.imgur.com/rIIMt.png" height="50" alt="[latex] $$ \int _ a ^ b x ^ 2 \, \mathrm {d} x $$ [/latex]" title="\int _ a ^ b x ^ 2 \, \mathrm {d} x">
Note I have used the full anki latex tags for the alt text, and just the latex code for the title text. Hover on the image above to see the tooltip in action! Or, to view and copy the full anki latex code held in the alt
tag, right-click on the image and click on "View image info" (or whatever it's called on your browser of choice).
Step 3 : Using as inline maths
Sometimes you need to use inline math in the text, e.g. to talk about
algorithms or whatnot. I find that if you just create the image tag, even with the right height (here I chose
height="18"
), the image isn't centered properly, and appears above the text baseline, like so:
.
Therefore, for inline use, you need to wrap your <img>
tag further with <sub>...</sub>
tags. Thankfully, this has the nice side-effect that you can have your <sub>
tag appear on its own line, making the page somewhat easier to read during editing. So, for example, the above inline sentence will look like this:
Sometimes you need to use inline math in the text, e.g. to talk about
<sub>
<img src="https://i.stack.imgur.com/Q87NV.png" height="18" alt="[latex] $$ O ( 2 ^ n ) $$ [/latex]" title="O ( 2 ^ n )">
</sub>
algorithms or whatnot.
That's all. I hope people find this useful.
The Question:
Would this method bypass the MathJax debacle enough, while being a decent workaround to interest an SO developer enough to create a bespoke editor button for the specific creation of latex equation images in this manner?