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

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 it appear correctly in a browser. This could be done server or client side.

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.

I once developed a jQuery plugin that does in fact this: jsLaTeX

Here's the simplest example of how it can be used:

$(".latex").latex();


<div class="latex">  
    \int_{0}^{\pi}\frac{x^{4}\left(1-x\right)^{4}}{1+x^{2}}dx =\frac{22}{7}-\pi  
</div>

The above will generate the following LaTeX equation on your page:

The Demo Page of the plugin contains more code examples and demos.

MediaWiki can do what you are looking for. It uses Texvc (http://en.wikipedia.org/wiki/Texvc) which "validates (AMS) LaTeX mathematical expressions and converts them to HTML, MathML, or PNG graphics." Sounds like what you are looking for.

Check out Wikipedia's article on how they handle math equations here: http://en.wikipedia.org/wiki/Help:Formula. They also have an extensive reference on LaTeX and pros/cons of the different rendering types (PNG/MathML/HTML).

> MediaWiki uses a subset of TeX markup, > including some extensions from LaTeX > and AMS-LaTeX, for mathematical > formulae. It generates either PNG > images or simple HTML markup, > depending on user preferences and the > complexity of the expression. In the > future, as more browsers are smarter, > it will be able to generate enhanced > HTML or even MathML in many cases. > (See blahtex for information about > current work on adding MathML > support.) > > More precisely, MediaWiki filters the > markup through Texvc, which in turn > passes the commands to TeX for the > actual rendering. Thus, only a limited > part of the full TeX language is > supported; see below for details. > ... > > Pros of HTML > > * In-line HTML formulae always align properly with the rest of the HTML > text. > * The formula's background, font size and face match the rest of HTML > contents and the appearance respects > CSS and browser settings. > * Pages using HTML will load faster. > > Pros of TeX > > * TeX is semantically superior to HTML. In TeX, "$x$" means > "mathematical variable x", whereas in > HTML "x" could mean anything. > Information has been irrevocably lost. > This has multiple benefits: > 1. TeX can be transformed into HTML, but not vice-versa. This means that on > the server side we can always > transform a formula, based on its > complexity and location within the > text, user preferences, type of > browser, etc. Therefore, where > possible, all the benefits of HTML can > be retained, together with the > benefits of TeX. It's true that the > current situation is not ideal, but > that's not a good reason to drop > information/contents. It's more a > reason to help improve the situation. > 2. TeX can be converted to MathML for browsers which support it, thus > keeping its semantics and allowing it > to be rendered as a vector. > * TeX has been specifically designed for typesetting formulae, so input is > easier and more natural, and output is > more aesthetically pleasing. > * When writing in TeX, editors need not worry about browser support, since > it is rendered into an image by the > server. HTML formulae, on the other > hand, can end up being rendered > inconsistent of editor's intentions > (or not at all), by some browsers or > older versions of a browser.

If you want to embed the mathematics as images, you may take a look at http://mathtran.org/">MathTran</a>;.

If you'd prefer to have the math inserted into the page primarily as text (using images only when necessary), http://www.math.union.edu/~dpvc/jsMath/">jsMath</a> may be what you're looking for.

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 :-(

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.

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.

Only one (very good) answer to this question cites KaTeX that, in my experience, is the most effective solution, loading fast and easy to implement.

You need to add one <link> tag (for the stylesheet) and two <script>s to your <head>. Then use \( \) as delimiters for inline math and \[ \] as delimiters for displayed math within the <body>.

Here's a minimal html5 file with an implementation:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
  <title>Katex</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
</head>

<body>
<p>Math can be inline like \(2^{2x}=4\), or displayed like:</p>
\[2^{3x}=8\]
</body>
</html>

You could try LaTexRenderer. I don't know if it's the best, but it does work.

I would definitely encourage you to look at MathML if that fits what you're looking for but a little work with JsTeX could give you everything you need.

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.