Theorem and proof environments in CSS

[2017-09-12 Tue]

Here is a nice idea from Dr Z.ac, the blog of Zachary Harmany which I'm planning to use to enhance the mathematical usability of my blog.

In org-mode you can create theorem/proof-like environments as follows (dots added before lines which would otherwise compile):

. #+BEGIN_thm Let $X$ be a compact space and $Y$ be a Hausdorff space. Any continuous bijection $F\colon X\to Y$ is a homeomorphism. . #+END_thm . #+BEGIN_proof It suffices to show that the image of a closed set $V\subset X$ is closed. A closed set of a compact space is compact, and the continuous image of a compact set is compact, hence $F(V)$ is compact. A compact subset of a Hausdorff space is closed, therefore $F(V)$ is closed. . #+END_proof

When you export to LaTeX this will produce theorem and proof environments as usual. When you export to HTML, it will create a div tag of class "Theorem". Here's how to use CSS to style this so that it actually has an appropriate "Theorem" label (and end-of-proof symbol).

.thm{ display:block; margin-left:10px; margin-bottom:20px; font-style:normal; } .thm:before{ content:"Theorem.\00a0\00a0"; float:left; font-weight:bold; }

.proof{ display:block; margin-left:10px; margin-bottom:30px; font-style:normal; } .proof:before{ content:'Proof.\00a0\00a0'; float:left; font-weight:bold; } .proof:after{ content:"\25FC"; float:right; }

to get:

Let $X$ be a compact space and $Y$ be a Hausdorff space. Any continuous bijection $F\colon X\to Y$ is a homeomorphism.

It suffices to show that the image of a closed set $V\subset X$ is closed. A closed set of a compact space is compact, and the continuous image of a compact set is compact, hence $F(V)$ is compact. A compact subset of a Hausdorff space is closed, therefore $F(V)$ is closed.