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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

.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)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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

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