# Mathjax theorems – CSS for LaTeX-like environments – Custom names

EDIT: As mentionend in the comments, this solutions does not currently work in all browsers.
EDIT2: Paul Siegel has commented below and shared a solution that works again in all browsers. His implementation should be preferred. For ease of reading, I’ve posted his solution on my new blog. Many thanks to him!

————————————————

In a fantastic post on his blog earlier this year, Zachary T. Harmany explained how LaTex-like environments, such as definitions, theorems and proofs, should be done with CSS.

His solution is a great way for writing mathematics on the web and I took his idea one step further, looking for a way to have custom names for theorems, which we would TeX as

\begin{theorem}[Prime numbers]
All odd numbers are prime.
\end{theorem}


To combine such functionality with Zachary’s approach, I got the right idea from BigMacAttack’s answer to a stackoverflow question about a related topic.

Here’s what I am suggesting:

.theorem {
display: block;
font-style: italic;
margin-left: 4.5%; margin-right: 4.5%; margin-top: 2em;
content: &quot;Theorem&amp;nbsp;&quot;;
}

.theorem:before {
content: inherit;
font-weight: bold;
font-style: normal;
}


With this one could write

&lt;div class=&quot;theorem&quot; style=&quot;content:'Theorem (Prime numbers)';&quot;&gt;
All odd numbers are prime.&lt;/div&gt;


to get

Theorem (Prime numbers) All odd numbers are prime.

### 3 Comments on “Mathjax theorems – CSS for LaTeX-like environments – Custom names”

hi, unfortunately result is not as expected in Chrome 😦

• Felix says:

It seems that you are correct, thanks for pointing that out. It does work in Firefox. Any suggestions on how to improve the snippets for Chrome are appreciated!

Here’s a fiddle to try it in other browsers: https://jsfiddle.net/jwbys82t/

• Paul Siegel says:

This is obviously a bit old, but if anyone else comes across this I came up with a way to do it that should work on all modern browsers. It uses attribute selection.

“
.theorem {
display: block;
font-style: italic;
.theorem:before {
content: “Theorem. “;
font-weight: bold;
font-style: normal;
}
.theorem[text]:before {
content: “Theorem (” attr(text) “). “;
}
“

Usage:

“
All odd numbers are prime.
All odd numbers are prime.
“

This would output (modulo formatting):

“
Theorem. All odd numbers are prime.
Theorem (Prime Numbers). All odd numbers are prime.
“