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

**Posted:**August 29, 2013

**Filed under:**tools |

**Tags:**css, latex, mathematics, mathjax 3 Comments

**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: "Theorem&nbsp;"; } .theorem:before { content: inherit; font-weight: bold; font-style: normal; }

With this one could write

<div class="theorem" style="content:'Theorem (Prime numbers)';"> All odd numbers are prime.</div>

to get

**Theorem (Prime numbers)** *All odd numbers are prime.*

For more about this, please visit Zachary’s original post !

hi, unfortunately result is not as expected in Chrome 😦

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/

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.

“`