# 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;
}

to get:
.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; }

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.