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

Kinesthesia

Does anyone know what solution is used here? It looks really good: mathwiki.ucdavis.edu/Algebra/Linear_algebra/… – Wills

@Wills Yup, LaTeX. – Divergency

@PythonGuy Thanks. But what is the LaTeX implementation? E.g. Texvc, Mathjax, MathML, something else? Is there any way of knowing? – Wills

@Wills It's MathJax. I looked in the source code, and at the bottom, there are two script tags which import MathJax.js from the MathJax CDN. It's pretty easy to use, just copy-paste the script tags. – Divergency

Also: tex.stackexchange.com/questions/23804/… – Wive

And also: #7009575 – Wive

@EthanAlvaree, the link is broken, here it is the archived version: web.archive.org/web/20151128154809/http://mathwiki.ucdavis.edu/… – Nard

Answer 1

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.

Joeljoela

html can be converted to TeX, take a look at pandoc. – Alleenallegation

Isn't MediaWiki powered by MathJax? This page seems to suggest it is: github.com/mathjax/MathJax-docs/wiki/MathJax-and-MediaWiki – Wills

Answer 2

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.

Nowadays

A page I found seems to suggest that MediaWiki (this question's accepted answer) is powered by MathJax, would that be true? github.com/mathjax/MathJax-docs/wiki/MathJax-and-MediaWiki – Wills

Answer 3

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.

Naraka

WTFPL-LICENSE.txt was a very nice beginning ;) and jsLaTeX works very well! – Wive

I love the idea, but it looks a bit fuzzy :/ – Nuthatch

This is just using an external service to render images (in this case latex.codecogs.com) - additional licenses for this service are required for commercial use. – Nidanidaros

Answer 4

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>

Wive

In my opinition, this should really be the accepted answer. KaTeX is vastly superior to MathJax for dynamic content. For me, the ability to render math in scripts with katex.renderToString is invaluable. – Millian

Answer 5

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.

Dextrogyrate

Answer 6

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

Teletypesetter

Answer 7

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.

Farber

Answer 8

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.

Openminded

Answer 9

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

Pyrogenic

Answer 10

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.

Odilia

Answer 11

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.

Guenon

Answer 12

I am not the most experienced programmer, but I have found another solution to the issue of placing LaTex equations in a webpage.

First, let us look at this: <?php echo "<div id='test1'>"; echo "Some content is within this div."; echo "</div>"; ?>

The above is a division with some content. Using CSS div 'test1' can be placed anywhere in a webpage. Now consider the following; I know it is unusual but please look:

<?php echo "<div id='test2'>"; ?>

`\[`
`5^{e}+\sin \left( 2\uppi \right)`
`\]`

`<?php`
`echo "</div>";`

// Continue with php code...

In the second example the div is broken up; it begins in php on the top then php ends; a LaTex equation is then written in HTML. Then php resumes and the div is ended.

The HTML is within the div. It can be placed anywhere in a webpage using CSS, and you are writing pure LaTex in HTML so you know what it will look like. Positioning LaTex in this way works for me--good luck!

Regenerator

I forgot!! In the <head> section add: – Regenerator

<head> <script src="polyfill.io/v3/polyfill.min.js?features=es6"></…> <script id="MathJax-script" async src="cdn.jsdelivr.net/npm/mathjax@3/es5/…> – Regenerator