JsMath
This page is dedicated to jsMath, a javascript that allows to render LaTeX formula in HTML pages with very high output quality and that works across multiple browsers on Windows, Linux and Mac.
Reference instructions:
Client-Side Install
- Install the standard fonts
- Download all extra fonts (from here), and install them on your system. Typically not all fonts are needed (msam10.ttf and msbm10.ttf are the most frequently used ones) but since you never know which ones are going to be used by the server, better install them all.
Server-Side Install
- Install jsmath main package.
- Install extra fonts package for fonts msam10 and msbm10 (these fonts are required for extension AMSsymbols, which is frequently used).
The packages are found here. To install them, create a directory fonts in jsmath directory, and unzip them there, i.e. you should end up with 2 directories named ./jsmath/fonts/msam10 and ./jsmath/fonts/msbm10.
Install on MediaWiki
On MediaWiki, there exists an extension that eases the use of jsMath. We describe here how the extension is installed on this wiki.
Reference information:
Install JsMath
Install jsMath in /miki/jsmath. See detailed instructions
Configure jsMath
Detailed instructions are available from the homepage of jsMath. This extension assumes that jsMath is configured through the file easy/load.js.
- jsMath can find out the root directory where it is installed, but it doesn't hurt to help it a bit:
root: "/miki/jsmath",
- Increase a bit the size of formulae:
scale: 130,
- Turn off jsMath's special interpretation of \(, \[, $ and $$ as math mode delimiters.
processSlashParens: 0, // process \(...\) in text? processSlashBrackets: 0, // process \[...\] in text? processDoubleDollars: 1, // process $$...$$ in text? processSingleDollars: 0, // process $...$ in text? processLaTeXenvironments: 0, // process \begin{xxx}...\end{xxx} outside math mode? fixEscapedDollars: 0, // convert \$ to $ outside of math mode? doubleDollarsAreInLine: 1, // make $$...$$ be in-line math? allowDisableTag: 1, // allow ID="tex2math_off" to disable tex2math?
- Load AMSmath and some extra fonts. Notice that you also need to install the extra fonts cmbsy10, cmmib10, msam10 and msbm10 on the server, as outlined on this page.
loadFiles: ["extensions/AMSmath.js", "extensions/AMSsymbols.js", "extensions/boldsymbol.js", "extensions/moreArrows.js"], loadFonts: ["cmmib10", "cmbsy10"],
- Finally, we disable the use of image fonts to save space on the server:
noImageFonts: 1
Install Extra Fonts
Install the following jsMath extra fonts package (in /miki/jsmath/fonts) : cmbsy10, cmib10, msam10, msbm10. Keep only the files def.js since we don't use image fonts.
Install the extension
Create the directory /miki/extensions/JsMath and save the files there (2 files from here: JsMath.i18n.php and JsMath.php).
Configure the extension
Edit /miki/LocalSettings.php as follows:
- TeX support must be enabled (see this page), but it is not mandatory to compile the render engine. Only setting this variable is enough:
$wgUseTeX = true;
- Then add the following lines at the end of the file /miki/LocalSettings.php. This selects jsMath as the default rendering engine for new users, and then loads the extension.
$wgJsMathDefault = 1; $wgJsMathRoot = "/miki/jsmath"; require_once( "$IP/extensions/JsMath/JsMath.php" );
See the Mediawiki extension doc to enable plugins by default (like smallFonts.js).
- For each user in MediaWiki, select jsMath as method to render math formulae. For new user, this shall be done automatically.
Troubleshoot
- I get the error message "unknown control sequence \msbm" when using
\mathbb{...}(blackboard bold).
- Most probably this is because jsmath cannot find the font definition file at ./jsmath/fonts/msbm10/def.js on the server side (see [1]).
\mathbbuses the fonts msbm, and to work properly, the author package msbm10.zip (see here) must be unzipped in directory ./jsmath/fonts/. Also for best rendering the msbm10 truetype font should be installed on the client side.
Examples
There are different ways to embed a LaTeX in the wikitext:
- Using
<math>...</math>. This will create always a formula with textstyle by default, but the formula remains inline even if style is changed to displaystyle. - Using
<div class="math">...</div>. This will create an block style (\displaystyle) formula. - Using
<span class="math">...</span>. This will create an inline style (\textstyle) formula. - Using
$$...$$. This will create a block style formula.
Using math tag
Some text before <math>\sum_{i=1}^n(x_i-\overline x) (y_i-\overline y)</math> and after
Some text before <math>\sum_{i=1}^n(x_i-\overline x) (y_i-\overline y)</math> and after
Some text before <math>\textstyle{ \sum_{i=1}^n(x_i-\overline x) (y_i-\overline y) }</math> and after
Some text before <math>\textstyle{ \sum_{i=1}^n(x_i-\overline x) (y_i-\overline y) }</math> and after
Some text before <math>\displaystyle{ \sum_{i=1}^n(x_i-\overline x) (y_i-\overline y) }</math> and after
Some text before <math>\displaystyle{ \sum_{i=1}^n(x_i-\overline x) (y_i-\overline y) }</math> and after
Using div tag
Some text before <div class="math">\sum_{i=1}^n(x_i-\overline x) (y_i-\overline y)</div> and after
Some text before
and after
Using span tag
Some text before <span class="math">\sum_{i=1}^n(x_i-\overline x) (y_i-\overline y)</span> and after
Some text before \sum_{i=1}^n(x_i-\overline x) (y_i-\overline y) and after
Using $$
Some text before $$\sum_{i=1}^n(x_i-\overline x) (y_i-\overline y)$$ and after
Some text before $$\sum_{i=1}^n(x_i-\overline x) (y_i-\overline y)$$ and after
Some text before $$\textstyle{ \sum_{i=1}^n(x_i-\overline x) (y_i-\overline y)} $$ and after
Some text before $$\textstyle{ \sum_{i=1}^n(x_i-\overline x) (y_i-\overline y)} $$ and after
Some text before $$\displaystyle{ \sum_{i=1}^n(x_i-\overline x) (y_i-\overline y)} $$ and after
Some text before $$\displaystyle{ \sum_{i=1}^n(x_i-\overline x) (y_i-\overline y)} $$ and after
Using $
But not $a_i^e$.
But not $a_i^e$.