# LaTeX Theorem-like Environments for the Web

Although MathJax offers LaTeX-like mathematical typesetting for the web, there are some other constructs from LaTeX that would be useful for a mathematical blog. For instance, the amsthm package allows you to define environments for theorems, proofs, lemmas, definitions, and so on. However, MathJax doesn’t implement these higher-level formatting features. And rightly so; any formatting on the web should be done with CSS.

Looking to see if anyone has attacked this problem, I came across Samuel Coskey’s post where he suggests using custom HTML tags as a solution. However, it seems to be a bad idea to use custom HTML tags. A more robust solution would be to use custom CSS classes instead.

The CSS I’m using is in theorems.css below. If you prefer an open Halmos / QED symbol versus the closed symbol, use \25FB in place of \25FC.

If you happen to be using Octopress, which uses Sass, this code can be appended to /sass/custom/_styles.scss.

And now to see this in action. The markdown (with inline HTML)

will produce the following:

A set $$C$$ is convex if for all $$x,y \in C$$ and for all $$\alpha \in [0,1]$$ the point $$\alpha x + (1-\alpha) y \in C$$.
There are no natural numbers $$\naturals = (1, 2, 3, \ldots)$$ $$x$$, $$y$$, and $$z$$ such that $$x^n + y^n = z^n$$, in which $$n$$ is a natural number greater than 2.

One improvement would be to allow theorem names and numbering (with subsequent referencing), but I think for now this is a nice solution.