Search code examples
javascripthtmlfirebasemathjax

Rendering TeX from something out of a database?


I'm using Firebase to put stuff onto a website. Something like "get a multiple choice question/options and shove them into div tags". Some of these questions use math/chemistry equations, and I think TeX would be a great tool to render.

Basically if my question is "Which reaction is exothermic?", I want my answer choice to not look like "Na + H2O -> NaOH + H2."

I just don't know how.

I've tried this script, but it doesn't work. I think that's because retrieving from a database and stuffing it into a div tag via getElementById bypasses what I can do with the script.

<script type="text/javascript" src="http://latex.codecogs.com/latexit.js"></script>

I think maybe I can get it to work with a document.write(), but I'm not very familiar with it (I'm not a web developer at all, sorry).

Is there anything I can do, HTML/JavaScript/whatever that can help me with this? Thanks in advance!


Solution

  • I would suggest getting hold of MathJax. This is an open source latex typesetter written in javascript. You can configure it so that it will render equations after they have been pulled from a database.

    If you equations are very simple, just with a few subscripts and superscripts MathJax might be overkill. You can do well with just <sup> and <sub> tags and some styling. Your equation could be represented as

    Na + H<sub>2</sub>O ⟶ NaOH + H<sub>2</sub>
    

    Quite a lot of the maths in Wikipedia uses this method.