A method for users to include LaTeX math in questions / answers without MathJax -- would SO devs be interested in adding this as a bespoke button?

This post is to help people who absolutely need mathematical notation on their questions / answers, to point out my method of doing so, given Stack Overflow's reluctance / inability to support MathJax (heavily discussed elsewhere on meta) (and for the consideration of the Stack Overflow 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.

I use it as a workaround whenever I need LaTeX math on Stack Overflow (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 Stack Overflow's own image generating facilities, then this is a safe enough way to do it that doesn't risk having the image deleted.

An example that uses this method.

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?

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, or preferably save the image and upload to Stack Overflow, using the "Insert image" facility in the editing window.

However, best is to quickly render the equation in Anki, then to click on "Insert Picture" here, and drag and drop the generated LaTeX image directly from the 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.

Now find that card from Anki's "Browse" mode and click on "Preview". You can preview LaTeX equations live as you type them. To create a LaTeX image, 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, Stack Overflow 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 image URL that was generated by Stack Overflow, remove all the image-related markdown, and create your own image tag. This 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:

[![enter image description here][1]][1] [1]: https://i.sstatic.net/rIIMt.png 

to something like:

<img src="https://i.sstatic.net/rIIMt.png" height="50" alt="[latex] $$ \int _ a ^ b x ^ 2 \, \mathrm {d} x $$ [/latex]" title="\int _ a ^ b x ^ 2 \, \mathrm {d} x"> 

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).

Step 3 : Using for inline math

Sometimes you need to use inline math in the text, e.g. to talk about algorithms. If you create just 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: . Therefore, for inline use you need to wrap your <img> tag further with <sub> and </sub> tags. You can have your <sub> tag appear on its own line, making the page somewhat easier to read during editing. 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.sstatic.net/Q87NV.png" height="18" alt="[latex] $$ O ( 2 ^ n ) $$ [/latex]" title="O ( 2 ^ n )"> </sub> algorithms.