What is the best way to embed LaTeX in a web page?

Question

I am not asking about converting a LaTeX document to html.

I would like to be able to use LaTeX math commands in an html document and display correctly in the browser. This can be done on the server or client side.

Answer 1

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

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

MediaWiki uses a subset of TeX markup, including some extensions from LaTeX and AMS-LaTeX, for mathematical formulas. It generates either PNG images or simple HTML markup, depending on user preferences and expression complexity. into the future, as more browsers are smarter, it will be able to generate advanced HTML or even MathML in many cases. (See Blahtex for information on ongoing work on adding MathML support.)

More precisely, MediaWiki filters the markup through Texvc, which in turn passes TeX commands for actual rendering. Thus, only a limited part of the full TeX language is supported; see below....

HTML Pros

• Inline HTML formulas always align correctly with the rest of the HTML text.
• The formula background, font size and face match the rest of the HTML content and the appearance of the CSS and browser settings.
• HTML pages will load faster.

Pros TeX

• TeX is semantically superior to HTML. In TeX, “x” stands for “mathematical variable x,” while in HTML, “x” can mean anything. Information has been irretrievably lost. This has several advantages:
  • TeX can be converted to HTML, but not vice versa. This means that on the server side, we can always transform the formula based on its complexity and text, user preferences, browser type, etc. Therefore, where possible, all the benefits of HTML can be retained along with the benefits of TeX. It is true that the current situation is not ideal, but this is not a reason for the fall of information / content. This is more of a reason to improve the situation.
  • TeX can be converted to MathML for browsers that support it, thus preserving its semantics and allowing it to be visualized as a vector.
• TeX is specifically designed for a set of formulas, so input is easier and more natural, and output is more aesthetically pleasing.
• When writing to TeX, editors do not have to worry about browser support, as it appears in the server image. HTML formulas, on the other hand, may turn out to be rendered incompatible with the intentions of the editor (or not at all), some browsers or older versions of the browser.

Answer 2

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

MathJax is an open source math javascript rendering engine. It uses CSS and Webfonts instead of images or flash and can display LaTeX or MathML. Thus, you have no problems with scaling and even compatible with the firmware.

Answer 3

I once developed a jQuery plugin that actually does this: jsLaTeX

Here is the simplest example of how this 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.

Answer 4

If you want to embed math as images, you can take a look at MathTran .

If you would prefer that the math was inserted on the page mainly as text (using images only when necessary), jsMath might be what you are looking for.

Answer 5

Historically, LaTeX rendering and image extraction has been the best choice for cross-platform cross-browser math materials. More and more MathML is becoming a reasonable alternative. Here is an online converter that outputs MathML from Tex markup, which you can then embed on your web page. I know that Gecko-based browsers like Firefox and Camino look great with MathML, just like Opera. IE does not work out of the box, but there are plugins available (like this one ).

Texvc is a great find! Vanilla HTML output should work well if you are most interested in superscripts / indices / italics / common characters, but for more complex things keep in mind that the most popular math-oriented sites (like Wolfram ) generate images, so there may be only so much that you can do if you are interested in compatibility with several browsers: - (

Answer 6

Here I read all the answers, and I am surprised that no one mentioned the conversion from PDF to HTML. If you use pdf2htmlEX , it will create perfect web pages from pdf . You just need to compile your latex in pdf (pdflatex) format.

By default, one html file is created with the contents of your PDF file made from CSS, javascript and html. I tried many tools for converting latex to html, and this is by far the best and simplest solution I have found .

Answer 7

You can try LaTexRenderer . I don't know if this is better, but it works.

Answer 8

I myself begin to study this, and it seems that everything has changed. I came across this demo comparing KaTeX and MathJax .

---

In short (at the time of writing):

• Fractions inside the matrix collide with each other in KaTeX, but not in MathJax (see "Cross product")
• Inside the square (or nth) root symbol, exponentials and nested square roots seem to collide with the horizontal top line (see "Repeating fractions" and "nth root".)
• MathJax has a slightly bolder and larger font, and KaTeX is a bit slimmer.

But perhaps the most decisive of all, I found that the overall MathJax processing for the page averaged 1674 ms in three starts. Unlike KaTeX, on average 128 ms , which is an order of magnitude better!

---

There are several other comparison points to consider when browsing related websites:

• The main KaTeX website claims to support most, but not all, LaTeX. They list their supported features here . MathJax also expresses some limitations . Although it is difficult to understand which of those who, in the end, have the "best" support. Some blogs I came across say that KaTeX has less support, but others say that in recent years, KaTeX has significantly improved support.
• The MathJax site advertises MathML support for both input and output. Some KaTeX issues on his github site here and here indicate that they support MathML for output but not input (I don't know much about MathML, but at least it seems important if you want to help users with violations view).
• KaTeX is rendered synchronously , so it does not reformat the page (part of what makes it faster). But in return, it temporarily blocks the browser.
• StackOverflow is a MathJax partner (see here ). It has been used on some StackExchange sites, but not on StackOverflow itself due to page loading performance. In contrast, KaTeX was developed by Kahn Academy.

Answer 9

I would definitely recommend that you take a look at MathML if that matches what you are looking for, but a little work with JsTeX could give you everything you need.

Answer 10

You can use tex2gif . It uses the LaTeX snippet, launches LaTeX and creates a PNG (or GIF). Easy to embed, easy to script. This works for me.

You can also check tex2png .