# LaTeX.css

## 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 or install the package using npm install latex.css.
• (optional) Add any classes to elements described in the next section.
• (optional) Add dark mode by adding the latex-dark-auto class to the <body>. More infos here.
• (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>
• (optional) If you need syntax highlighting, add the following script to include Prism and the Prism LaTeX stylesheet (or use any other):
<link rel="stylesheet" href="https://latex.now.sh/prism/prism.css">

<script src="https://cdn.jsdelivr.net/npm/prismjs/prism.min.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">
<h2>Abstract</h2>
<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.1
For any $s \in S,$ we let $f(s)$ denote the value of $k$ such that $s$ is the $k$ the 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$ the 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.2

## Language Support

The labels of theorems, definitions, lemmas and proofs can be changed to other supported language by including the following snippet, linking to the desired language in addition to the main CSS file.

<link rel="stylesheet" href="https://latex.now.sh/lang/es.css" />
...
<html lang="es">

Take a peek at the language support demo to see how the labels of the different languages change.

## Sidenotes

Sidenotes can be used as an alternative to footnotes, where the user does not have to jump to the bottom of the page to read it. On mobile, click the superscript to reveal the noteYay, sidenotes!. If you are on mobile, I will appear inline. If you are using a larger screen, the sidenote will appear to the right of the text..

Sidenotes do need a little bit of setup, they are made up of a label, an invisible checkbox on top of the number and a span with the text inside. The superscript is set automatically and incremented using CSS when the checkbox has a class of sidenote-number.

<label for="sn-1" class="sidenote-toggle sidenote-number"></label>
<input type="checkbox" id="sn-1" class="sidenote-toggle" />
<span class="sidenote"><!-- sidenote content --></span>

If you do not need superscripted numbers, you can opt out of the sidenote-number class and the sidenote will not have a number assigned. On a smaller screen, you will need to add a symbol inside the label for the user to click on. This is a sidenote without a number.

The snippet for a sidenote without a number is very similar:

<label for="sn-anything" class="sidenote-toggle">⊕</label>
<input type="checkbox" id="sn-anything" class="sidenote-toggle" />
<span class="sidenote"><!-- sidenote content --></span>

Add a class of left to the span with the sidenote class to make the note appear on the left side of the page on instead of right.

The symbol you could use to indicate a sidenote is up to you. What about this notebook. A notebook indicating a note. Aha.
(if on a large screen, resize to mobile to see the emoji)

## Dark Mode

There is built-in support for dark mode. By default, the document is in light mode. To enable dark mode, add the latex-dark class to the <body> element. This will force the document to be in dark mode.

If you want enable dark mode based on the prefers-color-scheme CSS media query, then use the latex-dark-auto class instead.

You can also add a dark mode toggle to your site by adding a button and a tiny bit of JavaScript:

<button id="dark-mode-toggle">Toggle dark mode</button>
document
.querySelector("#dark-mode-toggle")
document.body.classList.toggle("latex-dark");
});

Like this:

## Alternative Typeface

LaTeX.css uses Latin Modern by default. If you don't like this typeface (hard to read, too thin, etc.), you can switch to the Libertinus font family by adding a class of libertinus to the <body> tag. Click the button below to switch between Latin Modern and Libertinus.

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

A sample table with a descriptive caption.
Footer 1 Footer 2 Footer 3
Description 1 Description 2 Description 3
Description 1 Description 2 Description 3
Description 1 Description 2 Description 3
Example table taken from this paper on how to produce quality tables with LaTeX.
Item
Animal Description Price (\$)
Gnat per gram 13.65
Gnu stuffed 92.50
Emu stuffed 33.33
Color names and values.
Name HEX HSL RGB
Teal #008080 hsl(180, 100%, 25%) rgb(0, 128, 128)
Goldenrod #daa520 hsl(43, 74%, 49%) rgb(218, 165, 32)
Cornflowerblue #6495ed hsl(219, 79%, 66%) rgb(100, 149, 237)
Lightcoral #f08080 hsl(0, 79%, 72%) rgb(240, 128, 128)

## Miscellaneous

### Scroll Overflow

It is best to break up long equations into smaller parts, but when this isn't possible, consider wrapping the overflowing element with a class of scroll-wrapper to allow scrolling on the x-axis. Large tables should also be wrapped with this class.

Below is an example of a long equation with overflow scroll.

$$(1+x)^{n}=1+n x+\frac{n(n-1)}{2 !} x^{2}+\frac{n(n-1)(n-2)}{3 !} x^{3}+\frac{n(n-1)(n-2)(n-3)}{4 !} x^{4}+\frac{n(n-1)(n-2)(n-3)(n-4)}{5 !} x^{5}+\ldots$$

### Syntax Highlighting

If you need syntax highlighting for code, LaTeX.css provides a PrismJS theme that immitates the minted package for LaTeX. Add the following stylesheet and script:

<link rel="stylesheet" href="https://latex.now.sh/prism/prism.css">

<script src="https://cdn.jsdelivr.net/npm/prismjs/prism.min.js"></script>

And use it like this:

<pre>
<code class="language-html">
<!-- your HTML code snippet -->
</code>
</pre>

Change which languages Prism highlights by customising the script here.

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