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.

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:
• 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.
• 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.

Answer 2

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 3

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

Answer 4

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.

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.

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.

Answer 7

I am using a blog in which images do not work well...!!

Answer 8

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.