What is the best way to embed LaTeX in a webpage?

Question

I\'m not asking about converting a LaTeX document to html.

What I\'d like to be able to do is have some way to use LaTeX math commands in an html document, and have

Answer 1

Historically, rendering the LaTeX and extracting an image has been your best bet for cross-platform, cross-browser math stuff. More and more, MathML is becoming a reasonable alternative. Here's an online converter that will emit MathML from Tex markup, which you can then embed in your webpage. I know Gecko-based browsers like Firefox and Camino play nice with MathML, as does Opera. IE doesn't work out of the box, but there are plugins available (like this one).

Texvc is a great find! The vanilla HTML output should work well if you're mostly interested in superscripts/subscripts/italics/common symbols, but for more complex things, be aware that the most popular math-oriented sites out there (e.g. Wolfram) generate images, so there may be only so much you can do if you're interested in cross-browser compatibility :-(

Answer 2

I'm starting to look into this myself and it seems things have evolved. I have come across this comparison demo of KaTeX and MathJax.

---

Long story short (as of this writing):

• Fractions inside a matrix run into each other in KaTeX, but not MathJax (see "cross product")
• Inside the square (or nth) root symbol, exponents and nested square roots seem to run up against the horizontal top line (see "Repeating Fractions" and "nth root".)
• MathJax has slightly bolder and larger font, KaTeX is slightly leaner.

But perhaps most decisive of all, I found that the total MathJax processing for the page averaged to 1674 ms for three runs. In contrast, KaTeX averaged 128 ms, which is an order of magnitude better!

---

There are some other points of comparison to consider when looking through their respective websites:

• The KaTeX main website claims to support most, but not all, of LaTeX. They list their supported functions here. MathJax expresses some of its limitations as well. Though it's hard knowing from a quick skim of these who in the end has "better" support. Some blogs I've run across say KaTeX has less support, but others have said that KaTeX has improved support significantly in recent years.
• The MathJax website advertises support of MathML for both input and output. Some KaTeX issues on its github site here and here indicate that they support MathML for output, but not for input (I don't know much about MathML, but it at least seems important if you want to help out users with visual disabilities).
• KaTeX renders synchronously, so it doesn't reflow the page (part of what makes it faster). But in exchange it temporarily locks the browser.
• StackOverflow is a partner of MathJax (see here). It's used on some StackExchange sites, though not on StackOverflow itself due to page load time performance. In contrast, KaTeX was developed by Kahn Academy.

Answer 3

I prefer MathJax over solutions that choose to render images (which causes aliasing problems).

MathJax is an open source Javascript rendering engine for mathematics. It uses CSS and Webfonts instead of images or flash and can render LaTeX or MathML. That way you don't have problems with zoom and it's even screenreader compatible.

Answer 4

If you want to embed the mathematics as images, you may take a look at MathTran.

If you'd prefer to have the math inserted into the page primarily as text (using images only when necessary), jsMath may be what you're looking for.

Answer 5

I read all the answers here, and I'm surprised no one mentioned the convertion from PDF to HTML. If you use pdf2htmlEX it will create perfect webpages from a pdf. You just have to compile your latex to pdf (pdflatex).

By default it generates a single html file, with the contents of your PDF made out of CSS, javascript and html. I tried a lot of tools to convert latex to html and this is by far the best and easiest solution I found.

Answer 6

You can use tex2gif. It takes a LaTeX snippet, runs LaTeX and produces a PNG (or GIF). Easy to embed, easy to script. It works for me.

You can also check tex2png.