Getting Started
-
Add
<link rel="stylesheet" href="https://latex.now.sh/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) 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
Lemmas
Definitions
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 peak at the language support demo to see how the labels of the different languages change.
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. ↩