LaTeX.css — Make your website look like a LaTeX document

Abstract

This almost class-less CSS library turns your HTML document into a website that looks like a LaTeX document. Write semantic HTML, add <link rel="stylesheet" href="https://latex.now.sh/style.css"> to the <head> of your project and you are good to go. The source code can be found on GitHub at https://github.com/vincentdoerig/latex-css.

Getting Started

Add <link rel="stylesheet" href="https://latex.now.sh/style.css"> to the <head> of your website.
(optional) Add any classes to elements described in the next section.

(optional) If you need support for LaTeX math, add the following script to include MathJax:

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

Done.

Class-based Elements

Author and Abstract

Use the following code to add an author and abstract to your document. It will look like this.

<p class="author">John Doe <br> December 7, 2020</p>

<div class="abstract">
  <h5>Abstract</h5>
  <p>...</p>
</div>

Theorems, Definitions, Lemmas and Proofs

Theorems, definitions, lemmas and proofs are supported. Just wrap your content in a div and add the corresponding class to the element like in the following example.

<div class="theorem">...</div>
<div class="definition">...</div>
<div class="lemma">...</div>
<div class="proof">...</div>

Below are some examples.

Proofs & Theorems

The real numbers $\mathbb{R}$ are uncountable.

If $\mathbb{R}$ is countable, then [0, 1] is countable as well. Hence there exists a map C from $\mathbb{N}$ onto [0, 1] with $$C(n)=\sum_{i=1}^{\infty} c_{i}(n) 10^{-i}$$ where $c_{i}(n) \in\{0,1, \ldots, 9\},$ are the digits in decimal expansion. Now consider a real number $$x=\sum_{i=1}^{\infty} \bar{c}_{i} 10^{-i} \in[0,1]$$ with $\bar{c}_{i} \neq c_{i}(i)$. Obviously $C(n) \neq x$ for all $n \in \mathbb{N} .$ Hence $C$ is not onto. A contradiction.

If $S$ is both countable and infinite, then there is a bijection between $S$ and $\boldsymbol{N}$ itself.¹

For any $s \in S,$ we let $f(s)$ denote the value of $k$ such that $s$ is the $k$ th smallest element of $S .$ This map is well defined for any $s,$ because there are only finitely many natural numbers between 1 and $s .$ It is impossible for two different elements of $S$ to both be the $k$ th smallest element of $S$. Hence $f$ is one-to-one. Also, since $S$ is infinite, $f$ is onto.

Lemmas

An even number plus an even number results in an even number.

Definitions

A definition is a a statement of the meaning of a word or word group or a sign or symbol.²

HTML Elements

For a preview of all HTML elements with LaTeX.css, check out the HTML5 elements test page.

Text Formatting

This sentence is bold. If you like semantics, you might go with strong or emphasized text. If not, italic is still around. Small text is for fine print. Your copy can also be _subscripted and ^{superscripted}, inserted, ~~deleted~~, or highlighted. You would use a hyperlink to go to a new page. Keyboard input elements like Cmd + Shift are used to display textual user input.

Blockquotes

Give me six hours to chop down a tree and I will spend the first four sharpening the axe. — Abraham Lincoln

Definition Lists

Definition Title One: First definition description
Binomial theorem: $$(x+y)^{n}=\sum_{k=0}^{n}\left(\begin{array}{l}n \\ k\end{array}\right) x^{n-k} y^{k}=\sum_{k=0}^{n}\left(\begin{array}{l}n \\ k\end{array}\right) x^{k} y^{n-k}$$

Tables

Header 1	Header 2	Header 3
Footer 1	Footer 2	Footer 3
Description 1	Description 2	Description 3
Description 1	Description 2	Description 3
Description 1	Description 2	Description 3

Images

1. From https://www.math.brown.edu/~res/MFS/handout8.pdf. ↩

2. “Definition.” Merriam-Webster.com Dictionary, Merriam-Webster, https://www.merriam-webster.com/dictionary/definition. Accessed 18 May. 2020. ↩