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`

.

.theorem { display: block; margin: 12px 0; font-style: italic; ```
}
``` .theorem:before { content: "Theorem."; font-weight: bold; font-style: normal; ```
}
``` .lemma { display: block; margin: 12px 0; font-style: italic; ```
}
``` .lemma:before { content: "Lemma."; font-weight: bold; font-style: normal; ```
}
``` .proof { display: block; margin: 12px 0; font-style: normal; ```
}
``` .proof:before { content: "Proof."; font-style: italic; ```
}
``` .proof:after { content: "\25FC"; float:right; ```
}
``` .definition { display: block; margin: 12px 0; font-style: normal; ```
}
``` .definition:before { content: "Definition."; font-weight: bold; font-style: normal; ```
}
``` |

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)

<div class="definition"> 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$. ```
</div>
``` <div class="theorem"> 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. ```
</div>
``` |

will produce the following:

*convex*if for all \(x,y \in C\) and for all \(\alpha \in [0,1]\) the point \(\alpha x + (1-\alpha) y \in C\).

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