Getting Started
-
Add
<link rel="stylesheet" href="https://latex.vercel.app/style.css">
to the<head>
of your website or install the package usingnpm 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.vercel.app/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
Lemmas
Definitions
Paragraphs
In order to get automatic first line indentation of paragraphs, like in
default LaTeX articles, the class
indent-pars
can be used with article
tag.
<article class="indent-pars">
...
</article>
The CSS style provided follows babel
specific language rules: by default,
the first paragraph after a section title is not indented in English, unlike Spanish and
French languages.
To avoid first line indentation of some specific paragraph, the class no-indent
can be used.
<p class="no-indent">...</p>
Table Classes
Custom Table Borders
To add custom borders to the table, you should use the class
borders-custom
with <table>
tag, to begin with a table without any border. The classes
border-<position>-thin
and border-<position>-thick
,
are available, where <position>
can take one of the values:
top
, right
, bottom
, left
.
<table class="borders-custom ...">
<tr class="border-bottom-thick">
<td>...</td><td>...</td><td>...</td>
</tr>
<tr class="border-bottom-thin">
<td>...</td><td>...</td><td>...</td>
</tr>
...
See full examples in the section about tables.
Table Column Alignment
For each column of the table, there is one class for left, center or right
alignment, up to 12 columns: col-<n>-l
, col-<n>-c
,
col-<n>-r
, n
=1, ...,12. For example, a table with 3 columns
using the following classes
<table class="col-1-l col-2-c col-3-r">
<tr>
<td>...</td><td>...</td><td>...</td>
</tr>
...
aligns the first column to the left, centers the second one and aligns the third to the right.
See full examples in the section about tables.
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.vercel.app/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")
.addEventListener('click', () => {
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
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 |
Item | ||
---|---|---|
Animal | Description | Price ($) |
Gnat | per gram | 13.65 |
Gnu | stuffed | 92.50 |
Emu | stuffed | 33.33 |
Armadillo | frozen | 8.99 |
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) |
De Morgan's Law: $\lnot P \lor \lnot Q \iff \lnot (P \land Q)$ | ||||||
---|---|---|---|---|---|---|
TRUTH TABLE | ||||||
$P$ | $Q$ | $\lnot P$ | $\lnot Q$ | $P \land Q$ | $\lnot P \lor \lnot Q$ | $\lnot (P \land Q)$ |
T | T | F | F | T | F | F |
F | T | F | T | T | ||
F | T | T | F | F | T | T |
F | T | F | T | T |
CA Date | Object Name | Diameter | Dist. Min. (LD) |
---|---|---|---|
2023-Jul-10 | 2018 NW | 7.3m-16m | 0.287 |
2023-Jul-10 | 2023 LN1 | 45m-00m | 17.813 |
2023-Jul-11 | 2023 MD2 | 36m-80m | 5.570 |
2023-Jul-11 | 2023 NE | 32m-70m | 11.253 |
2023-Jul-11 | 2023 MQ1 | 28m-62m | 10.716 |
2023-Jul-12 | 2023 OM | 20m-46m | 7.628 |
2023-Jul-12 | 2018 UY | 190m-420m | 7.412 |
Images
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.
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.vercel.app/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.
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. ↩