52

I am looking for a purely client side javascript library that renders latex equations as HTML/CSS. I hate that all I see are utilities that request an image from a server.

Example usage:

latex('\frac{a}{b}')

output:

<div style="position: relative; display: inline-block; height: 2em; width: 1em">
  <div style="position: absolute; top: 0em">a</div>
  <div style="position: absolute; top: 1em; border-top: 1px solid black">b</div>
</div>

I ask because if this does not exist I am considering writing it, perhaps as a jQuery plugin.

Fletcher Moore
  • 13,558
  • 11
  • 40
  • 58

6 Answers6

55

MathJax is an evolution of and replacement for jsMath by the same main developer, Davide Cervone, but with corporate backing. It is not built on top of jsMath but is essentially a re-engineering of it. It follows pretty much the same principles as jsMath but adds support for MathML and takes better advantage of modern browsers, webfonts, and JavaScript technology. While Davide will answer questions about jsMath, no future development will likely occur on it and its users are strongly encouraged to move to MathJax. My company, Design Science, is one of its backers.

Paul Topping
  • 561
  • 3
  • 2
35

jsMath renders TeX forumlas. It is also used by mathoverflow.net and the web interface of the mathematics software sage. I assume they know what they are doing ;)

From the homepage:

The jsMath package provides a method of including mathematics in HTML pages that works across multiple browsers under Windows, Macintosh OS X, Linux and other flavors of unix. It overcomes a number of the shortcomings of the traditional method of using images to represent mathematics: jsMath uses native fonts, so they resize when you change the size of the text in your browser, they print at the full resolution of your printer, and you don't have to wait for dozens of images to be downloaded in order to see the mathematics in a web page. There are also advantages for web-page authors, as there is no need to preprocess your web pages to generate any images, and the mathematics is entered in TeX form, so it is easy to create and maintain your web pages.

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
  • 1
    I don't think jsMath has much in the way of LaTex support -- just enough plain TeX to render equations. Nevertheless, it does a great job, and I consider it the best-of-breed tool for this scenario. – Jim Lewis Jul 19 '10 at 19:26
  • 3
    mathjax is still active - last update was apr 2010. it's gone beyond jsmath. – duffymo Jul 19 '10 at 19:52
  • @duffymo: I would not consider jsMath as dead (not yet). Bug reports are still reported and answered. – Felix Kling Jul 19 '10 at 20:05
  • You used the word "dead", not me. I said MathJAX had its last release on 15-Apr-2010. jsmath web page says "last modified Mar 2009". Not sure if that means the site itself or the software. – duffymo Jul 19 '10 at 20:27
  • 3
    -1 here and +1 for MathJax answers instead. – Chinasaur Jan 27 '13 at 21:12
  • 3
    I will say it again as many people will see this - **do not use jsMath, use MathJax** - from the same author as jsMath, with 100-times easier installation. And with an active development. – Karel Bílek Aug 10 '14 at 23:49
26

Katex

Khan academy just released its open source Katex. It's very fast. IMO it is the best option right now.

Fast: KaTeX renders its math synchronously and doesn’t need to reflow the page.

Print quality: KaTeX’s layout is based on Donald Knuth’s TeX, the gold standard for math typesetting.

Self contained: KaTeX has no dependencies and can easily be bundled with your website resources.

Server side rendering: KaTeX produces the same output regardless of browser or environment, so you can pre-render expressions using Node.js and send them as plain HTML.

Community
  • 1
  • 1
Ciro Costa
  • 2,455
  • 22
  • 25
  • Since MathJax 3 it is not the fastest option anymore (see: [Speed comparison](https://www.intmath.com/cg5/katex-mathjax-comparison.php)). – Sr. Schneider Jul 27 '20 at 10:47
20

There's mathjax and jsmath.

Update: As of 2-May-2015, I'd recommend Khan Academy's KaTeX.

duffymo
  • 305,152
  • 44
  • 369
  • 561
  • He explicitly asked for a non server-based solution. So what you are suggesting are not valid options. – Pablo Santa Cruz Jul 19 '10 at 19:17
  • 8
    @Pablo: jsMath runs in the browser. I would not consider this answer as *not useful* +1 from me. – Felix Kling Jul 19 '10 at 19:19
  • 3
    "...I am looking for a purely client side javascript library.." - both of these are Javascript libraries that run in the browser. How are they not valid? – duffymo Jul 19 '10 at 19:20
  • I see... jsmath apperently might be what he is looking for. Mathjax on the other hand, is not. He/She stated in the question that "hate that all I see are utilities that request an image from a server". So mathjax is probably not an option. FWIW, -1 wasn't from me. – Pablo Santa Cruz Jul 19 '10 at 19:24
  • 2
    As I understand it, MathJAX is built on top of jsmath. It's actually the one that's "live", since jsmath isn't active anymore. They're the same technology, so either both apply or neither does. – duffymo Jul 19 '10 at 19:44
  • You are right, MathJax is the successor of jsMath (the author of jsMath also participates in MathJax). – Felix Kling Jul 19 '10 at 19:55
  • Yes, exactly. Thanks, Felix. – duffymo Jul 19 '10 at 20:27
2

The existing softwares have very different speeds. Other softwares I found:

juzraai
  • 5,693
  • 8
  • 33
  • 47
Beowulfdgo
  • 141
  • 1
  • 1
  • 9
  • A link to a solution is welcome, but please ensure your answer is useful without it: [add context around the link](//meta.stackexchange.com/a/8259) so your fellow users will have some idea what it is and why it’s there, then quote the most relevant part of the page you're linking to in case the target page is unavailable. [Answers that are little more than a link may be deleted.](//stackoverflow.com/help/deleted-answers) – Zoe Jul 11 '18 at 18:46
2

Mathquill is an open source project that purely use javascript to parse latex and render math equation. You can check it out here: links

chepukha
  • 2,371
  • 3
  • 28
  • 40