mirror of
https://github.com/vincentdoerig/latex-css.git
synced 2024-09-11 04:46:36 +03:00
676 lines
28 KiB
HTML
676 lines
28 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="google-site-verification" content="tm5Y6ZNTf-lBqbwniGjQPv1q02o2TuUQZ9GTYa4SMLg" />
|
|
<title>LaTeX.css — Make your website look like a LaTeX document</title>
|
|
|
|
<meta name="description"
|
|
content="A minimal, almost class-less CSS library to write modern websites that look like LaTeX documents." />
|
|
<meta name="keywords" content="latex.css,css library,class-less css,latex css" />
|
|
<meta property="og:title" content="LaTeX.css" />
|
|
<meta property="og:url" content="https://latex.vercel.app" />
|
|
<meta property="og:description"
|
|
content="A minimal, almost class-less CSS library to write modern websites that look like LaTeX documents." />
|
|
<meta property="og:type" content="website" />
|
|
|
|
<link rel="stylesheet" href="style.css" />
|
|
<link rel="stylesheet" href="prism/prism.css" />
|
|
</head>
|
|
|
|
<body id="top">
|
|
<header>
|
|
<h1><span class="latex">L<span>a</span>T<span>e</span>X</span>.css</h1>
|
|
<p class="author">
|
|
Vincent Dörig <br />
|
|
May 2020
|
|
</p>
|
|
</header>
|
|
|
|
<div class="abstract">
|
|
<h2>Abstract</h2>
|
|
<p>
|
|
This almost class-less CSS library turns your HTML document into a
|
|
website that looks like a
|
|
<span class="latex">L<span>a</span>T<span>e</span>X</span>
|
|
document. Write semantic HTML, add
|
|
<code class="language-html"><link rel="stylesheet"
|
|
href="https://latex.vercel.app/style.css"></code>
|
|
to the <code class="language-html"><head></code> of your project and you are good to go.
|
|
The source code can be found on GitHub at
|
|
<a href="https://github.com/vincentdoerig/latex-css">https://github.com/vincentdoerig/latex-css</a>.
|
|
</p>
|
|
</div>
|
|
|
|
<nav role="navigation" class="toc">
|
|
<h2>Contents</h2>
|
|
<ol>
|
|
<li><a href="#getting-started">Getting Started</a></li>
|
|
<li>
|
|
<a href="#class-based-elements">Class-based Elements</a>
|
|
<ol>
|
|
<li><a href="#author-abstract">Author and Abstract</a></li>
|
|
<li>
|
|
<a href="#tdpl">Theorems, Definitions and Proofs</a>
|
|
<ol>
|
|
<li><a href="#proofs-theorems">Proofs & Theorems</a></li>
|
|
<li><a href="#lemmas">Lemmas</a></li>
|
|
<li><a href="#definitions">Definitions</a></li>
|
|
</ol>
|
|
</li>
|
|
<li><a href="#paragraphs">Paragraphs</a></li>
|
|
<li><a href="#table-classes">Table Classes</a>
|
|
<ol>
|
|
<li><a href="#table-borders">Custom Table Borders</a></li>
|
|
<li><a href="#table-column-aligment">Table Column Alignment</a></li>
|
|
</ol>
|
|
</li>
|
|
</ol>
|
|
</li>
|
|
<li><a href="#language-support">Language Support</a></li>
|
|
<li><a href="#sidenotes">Sidenotes</a></li>
|
|
<li><a href="#dark-mode">Dark Mode</a></li>
|
|
<li><a href="#alternative-typeface">Alternative Typeface</a></li>
|
|
<li>
|
|
<a href="#html-elements">HTML Elements</a>
|
|
<ol>
|
|
<li><a href="#text-formatting">Text Formatting</a></li>
|
|
<li><a href="#blockquotes">Blockquotes</a></li>
|
|
<li><a href="#definition-lists">Definition Lists</a></li>
|
|
<li><a href="#tables">Tables</a></li>
|
|
<li><a href="#images">Images</a></li>
|
|
</ol>
|
|
</li>
|
|
<li>
|
|
<a href="#miscellaneous">Miscellaneous</a>
|
|
<ol>
|
|
<li><a href="#scroll-overflow">Scroll Overflow</a></li>
|
|
<li><a href="#syntax-highlighting">Syntax Highlighting</a></li>
|
|
</ol>
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<main>
|
|
<article>
|
|
<h2 id="getting-started">Getting Started</h2>
|
|
<ul>
|
|
<li>
|
|
Add
|
|
<code class="language-html"><link rel="stylesheet"
|
|
href="https://latex.vercel.app/style.css"></code>
|
|
to the <code class="language-html"><head></code> of your website or install the
|
|
package using <code>npm install latex.css</code>.
|
|
</li>
|
|
<li>
|
|
(optional) Add any classes to elements described in the
|
|
<a href="#class-based-elements">next section</a>.
|
|
</li>
|
|
<li>
|
|
(optional) Add dark mode by adding the <code>latex-dark-auto</code> class to the <code
|
|
class="language-html"><body></code>.
|
|
More infos <a href="#dark-mode">here</a>.
|
|
</li>
|
|
<li>
|
|
(optional) If you need support for
|
|
<span class="latex">L<span>a</span>T<span>e</span>X</span> math, add
|
|
the following script to include
|
|
<a href="https://www.mathjax.org/">MathJax</a>:
|
|
<pre><code class="language-html"><script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script></code></pre>
|
|
</li>
|
|
<li>
|
|
(optional) If you need syntax highlighting, add
|
|
the following script to include
|
|
<a href="https://prismjs.com/">Prism</a> and the Prism LaTeX stylesheet (or use any other):
|
|
<pre><code class="language-html"><link rel="stylesheet" href="https://latex.vercel.app/prism/prism.css">
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/prismjs/prism.min.js"></script></code></pre>
|
|
</li>
|
|
<li>Done.</li>
|
|
</ul>
|
|
|
|
<h2 id="class-based-elements">Class-based Elements</h2>
|
|
<h3 id="author-abstract">Author and Abstract</h3>
|
|
<p>
|
|
Use the following code to add an author and abstract to your document.
|
|
It will look like <a href="#top">this</a>.
|
|
</p>
|
|
<pre><code class="language-html"><p class="author">John Doe <br> December 7, 2020</p>
|
|
|
|
<div class="abstract">
|
|
<h2>Abstract</h2>
|
|
<p>...</p>
|
|
</div></code></pre>
|
|
|
|
<h3 id="tdpl">Theorems, Definitions, Lemmas and Proofs</h3>
|
|
<p>
|
|
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.
|
|
</p>
|
|
|
|
<pre><code class="language-html"><div class="theorem">...</div>
|
|
<div class="definition">...</div>
|
|
<div class="lemma">...</div>
|
|
<div class="proof">...</div></code></pre>
|
|
<p>Below are some examples.</p>
|
|
<h4 id="proofs-theorems">Proofs & Theorems</h4>
|
|
<div class="theorem">
|
|
The real numbers $\mathbb{R}$ are uncountable.
|
|
</div>
|
|
<div class="proof">
|
|
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.
|
|
</div>
|
|
<div class="theorem">
|
|
If $S$ is both countable and infinite, then there is a bijection
|
|
between $S$ and $\boldsymbol{N}$ itself.<sup><a href="#fn1" id="ref1">1</a></sup>
|
|
</div>
|
|
<div class="proof">
|
|
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.
|
|
</div>
|
|
<h4 id="lemmas">Lemmas</h4>
|
|
<div class="lemma">
|
|
An even number plus an even number results in an even number.
|
|
</div>
|
|
<h4 id="definitions">Definitions</h4>
|
|
<div class="definition">
|
|
A definition is a a statement of the meaning of a word or word group
|
|
or a sign or symbol.<sup><a href="#fn2" id="ref2">2</a></sup>
|
|
</div>
|
|
|
|
<h3 id="paragraphs">Paragraphs</h3>
|
|
<p>
|
|
In order to get automatic first line indentation of paragraphs, like in
|
|
default <span class="latex">L<span>a</span>T<span>e</span>X</span> articles, the class
|
|
<code>indent-pars</code> can be used with <code>article</code> tag.
|
|
</p>
|
|
<pre><code class="language-html"><article class="indent-pars">
|
|
...
|
|
</article></code></pre>
|
|
<p>
|
|
The CSS style provided follows <code>babel</code> specific language rules: by default,
|
|
the first paragraph after a section title is not indented in English, unlike Spanish and
|
|
French languages.
|
|
</p>
|
|
<p>
|
|
To avoid first line indentation of some specific paragraph, the class <code>no-indent</code>
|
|
can be used.</p>
|
|
<pre><code class="language-html"><p class="no-indent">...</p></code></pre>
|
|
<h3 id="table-classes">Table Classes</h3>
|
|
<h4 id="table-borders">Custom Table Borders</h4>
|
|
<p>
|
|
To add custom borders to the table, you should use the class
|
|
<code class="language-html">borders-custom</code> with <code><table></code>
|
|
tag, to begin with a table without any border. The classes
|
|
<code>border-<position>-thin</code> and <code>border-<position>-thick</code>,
|
|
are available, where <code><position></code> can take one of the values:
|
|
<code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>.
|
|
</p>
|
|
<pre><code class="language-html"><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>
|
|
...</code></pre>
|
|
<p>See full examples in the <a href="#tables">section about tables</a>.</p>
|
|
<h4 id="table-column-aligment">Table Column Alignment</h4>
|
|
<p>
|
|
For each column of the table, there is one class for left, center or right
|
|
alignment, up to 12 columns: <code>col-<n>-l</code>, <code>col-<n>-c</code>,
|
|
<code>col-<n>-r</code>, <code>n</code>=1, ...,12. For example, a table with 3 columns
|
|
using the following classes
|
|
</p>
|
|
<pre><code class="language-html"><table class="col-1-l col-2-c col-3-r">
|
|
<tr>
|
|
<td>...</td><td>...</td><td>...</td>
|
|
</tr>
|
|
...</code></pre>
|
|
<p>
|
|
aligns the first column to the left, centers the second one and aligns the
|
|
third to the right.
|
|
</p>
|
|
|
|
<p>See full examples in the <a href="#tables">section about tables</a>.</p>
|
|
|
|
<h2 id="language-support">Language Support</h2>
|
|
<p>
|
|
The labels of theorems, definitions, lemmas and proofs can be changed
|
|
to other
|
|
<a href="https://github.com/vincentdoerig/latex-css/tree/master/lang">supported language</a>
|
|
by including the following snippet, linking to the desired language in
|
|
addition to the main CSS file.
|
|
</p>
|
|
<pre><code class="language-html"><link rel="stylesheet" href="https://latex.vercel.app/lang/es.css" />
|
|
...
|
|
<html lang="es"></code></pre>
|
|
<p>
|
|
Take a peek at the <a href="/languages">language support demo</a> to
|
|
see how the labels of the different languages change.
|
|
</p>
|
|
|
|
<h2 id="sidenotes">Sidenotes</h2>
|
|
<p>
|
|
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 note<label for="sn-1" class="sidenote-toggle sidenote-number"></label><input
|
|
type="checkbox" id="sn-1" class="sidenote-toggle" /><span class="sidenote">Yay, 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.</span>.
|
|
</p>
|
|
|
|
<p>
|
|
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 <code>sidenote-number</code>.
|
|
</p>
|
|
<pre><code class="language-html"><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></code></pre>
|
|
<p>If you do not need superscripted numbers, you can opt out of the <code>sidenote-number</code> class and the sidenote will not have a number assigned. On a smaller screen, you will need to add a symbol inside the <code>label</code> for the user to click on. <label for="sn-plus" class="sidenote-toggle">⊕</label><input type="checkbox"
|
|
id="sn-plus" class="sidenote-toggle" /><span class="sidenote">This is a sidenote without a number.</span></p>
|
|
<p>The snippet for a sidenote without a number is very similar:</p>
|
|
<pre><code class="language-html"><label for="sn-anything" class="sidenote-toggle">⊕</label>
|
|
<input type="checkbox" id="sn-anything" class="sidenote-toggle" />
|
|
<span class="sidenote"><!-- sidenote content --></span></code></pre>
|
|
<!-- sidnotes as a link
|
|
<label for="sn-plus" class="sidenote-toggle"><a
|
|
href="#sn-plus-content">⊕</a></label><input type="checkbox" id="sn-plus" class="sidenote-toggle" /><span
|
|
class="sidenote" id="sn-plus-content">This is a sidenote without a number.</span> -->
|
|
<p>Add a class of <code>left</code> to the span with the <code>sidenote</code> class to make the note appear on the left side of the page on instead of right.</p>
|
|
<p>The symbol you could use to indicate a sidenote is up to you. What about this notebook. <label for="sn-symbol"
|
|
class="sidenote-toggle">📝</label><input type="checkbox" id="sn-symbol" class="sidenote-toggle" /><span
|
|
class="sidenote left">A notebook indicating a note. Aha. <br> (if on a large screen, resize to mobile to see the emoji)</span></p>
|
|
<!-- <blockquote>You could also have sidenotes inside blockquotes just like this one <label for="sn-quote"
|
|
class="sidenote-toggle">🔖</label><input type="checkbox" id="sn-quote" class="sidenote-toggle" /><span
|
|
class="sidenote">Hello there!</span>.</blockquote> -->
|
|
|
|
<h2 id="dark-mode">Dark Mode</h2>
|
|
<p>There is built-in support for dark mode. By default, the document is in light mode. To enable dark mode, add
|
|
the
|
|
<code>latex-dark</code> class to the <code class="language-html"><body></code> element. This will force
|
|
the document to be in dark mode.
|
|
</p>
|
|
<p>If you want enable dark mode based on the
|
|
<code>prefers-color-scheme</code> CSS media query, then use the <code>latex-dark-auto</code> class instead.
|
|
</p>
|
|
<p>You can also add a dark mode toggle to your site by adding a button and a tiny bit of JavaScript:</p>
|
|
<pre><code class="language-html"><button id="dark-mode-toggle">Toggle dark mode</button></code></pre>
|
|
<pre><code class="language-javascript">document
|
|
.querySelector("#dark-mode-toggle")
|
|
.addEventListener('click', () => {
|
|
document.body.classList.toggle("latex-dark");
|
|
});</code></pre>
|
|
<p>Like this: <button id="dark-mode-toggle">Toggle dark mode</button></p>
|
|
|
|
<h2 id="alternative-typeface">Alternative Typeface</h2>
|
|
<p><span class="latex">L<span>a</span>T<span>e</span>X</span>.css uses Latin Modern by default. If you don't like this typeface (hard to read, too thin, etc.), you can switch to the <a href="https://github.com/alerque/libertinus"><code>Libertinus</code></a> font family by adding a class of <code>libertinus</code> to the <code class="language-html"><body></code> tag. Click the button below to switch between Latin Modern and Libertinus.</p>
|
|
|
|
<button id="typeface-toggle">Current typeface: <span id="typeface">Latin Modern</span></button>
|
|
|
|
<h2 id="html-elements">HTML Elements</h2>
|
|
<p>
|
|
For a preview of all HTML elements with LaTeX.css, check out the
|
|
<a href="/elements">HTML5 elements test page</a>.
|
|
</p>
|
|
|
|
<h3 id="text-formatting">Text Formatting</h3>
|
|
<p>
|
|
This sentence is <b>bold</b>. If you like semantics, you might go with
|
|
<strong>strong</strong> or <em>emphasized</em> text. If not,
|
|
<i>italic</i> is still around. <small>Small</small> text is for fine
|
|
print. Your copy can also be <sub>subscripted</sub> and
|
|
<sup>superscripted</sup>, <ins>inserted</ins>, <del>deleted</del>, or
|
|
<mark>highlighted</mark>. You would use a
|
|
<a href="#!">hyperlink</a> to go to a new page. Keyboard input
|
|
elements like <kbd>Cmd</kbd> + <kbd>Shift</kbd>
|
|
are used to display textual user input.
|
|
</p>
|
|
|
|
<h3 id="blockquotes">Blockquotes</h3>
|
|
<blockquote>
|
|
Give me six hours to chop down a tree and I will spend the first four
|
|
sharpening the axe.
|
|
<cite>— Abraham Lincoln</cite>
|
|
</blockquote>
|
|
|
|
<h3 id="definition-lists">Definition Lists</h3>
|
|
<dl>
|
|
<dt>Definition Title One</dt>
|
|
<dd>First definition description</dd>
|
|
<dt>Binomial theorem</dt>
|
|
<dd>
|
|
$$(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}$$
|
|
</dd>
|
|
</dl>
|
|
|
|
<h3 id="tables">Tables</h3>
|
|
<table>
|
|
<caption>A sample table with a descriptive caption.</caption>
|
|
<thead>
|
|
<tr>
|
|
<th>Header 1</th>
|
|
<th>Header 2</th>
|
|
<th>Header 3</th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr>
|
|
<th>Footer 1</th>
|
|
<th>Footer 2</th>
|
|
<th>Footer 3</th>
|
|
</tr>
|
|
</tfoot>
|
|
<tbody>
|
|
<tr>
|
|
<td>Description 1</td>
|
|
<td>Description 2</td>
|
|
<td>Description 3</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Description 1</td>
|
|
<td>Description 2</td>
|
|
<td>Description 3</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Description 1</td>
|
|
<td>Description 2</td>
|
|
<td>Description 3</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<table>
|
|
<caption>
|
|
Example table taken from <a href="https://texdoc.org/serve/booktabs/0">this
|
|
paper</a> on how to produce quality tables with LaTeX.
|
|
</caption>
|
|
<thead>
|
|
<tr>
|
|
<th colspan="2" scope="col">Item</th>
|
|
</tr>
|
|
<tr>
|
|
<th>Animal</th>
|
|
<th>Description</th>
|
|
<th>Price ($)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Gnat</td>
|
|
<td>per gram</td>
|
|
<td>13.65</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Gnu</td>
|
|
<td>stuffed</td>
|
|
<td>92.50</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Emu</td>
|
|
<td>stuffed</td>
|
|
<td>33.33</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Armadillo</td>
|
|
<td>frozen</td>
|
|
<td>8.99</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="scroll-wrapper">
|
|
<table>
|
|
<caption>Color names and values.</caption>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="col">Name</th>
|
|
<th scope="col">HEX</th>
|
|
<th scope="col">HSL</th>
|
|
<th scope="col">RGB</th>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row" style="color: teal;">Teal</th>
|
|
<td><code>#008080</code></td>
|
|
<td><code>hsl(180, 100%, 25%)</code></td>
|
|
<td><code>rgb(0, 128, 128)</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row" style="color: goldenrod;">Goldenrod</th>
|
|
<td><code>#daa520</code></td>
|
|
<td><code>hsl(43, 74%, 49%)</code></td>
|
|
<td><code>rgb(218, 165, 32)</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row" style="color: cornflowerblue;">Cornflowerblue</th>
|
|
<td><code>#6495ed</code></td>
|
|
<td><code>hsl(219, 79%, 66%)</code></td>
|
|
<td><code>rgb(100, 149, 237)</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row" style="color: lightcoral;">Lightcoral</th>
|
|
<td><code>#f08080</code></td>
|
|
<td><code>hsl(0, 79%, 72%)</code></td>
|
|
<td><code>rgb(240, 128, 128)</code></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<table class="borders-custom col-1-c col-2-c col-3-c col-4-c col-5-c col-6-c
|
|
col-7-c col-8-c">
|
|
<caption>Example table with custom borders and aligment.</caption>
|
|
<colgroup>
|
|
<col class="border-left-thin border-right-thin">
|
|
<col class="border-right-thin">
|
|
<col class="border-right-thin">
|
|
<col class="border-right-thin">
|
|
<col class="border-right-thick">
|
|
<col class="border-right-thin">
|
|
<col class="border-right-thin">
|
|
</colgroup>
|
|
<tr class="border-top-thin">
|
|
<th scope="col" colspan="7">De Morgan's Law: $\lnot P \lor \lnot Q \iff \lnot (P \land Q)$</th>
|
|
</tr>
|
|
<tr>
|
|
<th scope="col" colspan="7" class="border-bottom-thin">TRUTH TABLE</th>
|
|
</tr>
|
|
<tr class="border-bottom-thin">
|
|
<td>$P$</td>
|
|
<td>$Q$</td>
|
|
<td>$\lnot P$</td>
|
|
<td>$\lnot Q$</td>
|
|
<td>$P \land Q$</td>
|
|
<td>$\lnot P \lor \lnot Q$</td>
|
|
<td>$\lnot (P \land Q)$</td>
|
|
</tr>
|
|
<tr class="border-bottom-thin">
|
|
<td rowspan="2">T</td>
|
|
<td>T</td>
|
|
<td rowspan="2">F</td>
|
|
<td>F</td>
|
|
<td>T</td>
|
|
<td><strong>F</strong></td>
|
|
<td><strong>F</strong></td>
|
|
</tr>
|
|
<tr class="border-bottom-thin">
|
|
<td>F</td>
|
|
<td>T</td>
|
|
<td>F</td>
|
|
<td><strong>T</strong></td>
|
|
<td><strong>T</strong></td>
|
|
</tr>
|
|
<tr class="border-bottom-thin">
|
|
<td rowspan="2">F</td>
|
|
<td>T</td>
|
|
<td rowspan="2">T</td>
|
|
<td>F</td>
|
|
<td>F</td>
|
|
<td><strong>T</strong></td>
|
|
<td><strong>T</strong></td>
|
|
</tr>
|
|
<tr class="border-bottom-thin">
|
|
<td>F</td>
|
|
<td>T</td>
|
|
<td>F</td>
|
|
<td><strong>T</strong></td>
|
|
<td><strong>T</strong></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<table class="borders-custom col-1-l col-2-c col-3-c col-4-r">
|
|
<caption>Close approaches to the Earth by NEOs.</caption>
|
|
<thead>
|
|
<tr class="border-bottom-thick">
|
|
<th>CA Date</th>
|
|
<th>Object Name</th>
|
|
<th>Diameter</th>
|
|
<th>Dist. Min. (LD)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>2023-Jul-10</td>
|
|
<td>2018 NW</td>
|
|
<td>7.3m-16m</td>
|
|
<td>0.287</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2023-Jul-10</td>
|
|
<td>2023 LN1</td>
|
|
<td>45m-00m</td>
|
|
<td>17.813</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2023-Jul-11</td>
|
|
<td>2023 MD2</td>
|
|
<td>36m-80m</td>
|
|
<td>5.570</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2023-Jul-11</td>
|
|
<td>2023 NE</td>
|
|
<td>32m-70m</td>
|
|
<td>11.253</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2023-Jul-11</td>
|
|
<td>2023 MQ1</td>
|
|
<td>28m-62m</td>
|
|
<td>10.716</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2023-Jul-12</td>
|
|
<td>2023 OM</td>
|
|
<td>20m-46m</td>
|
|
<td>7.628</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2023-Jul-12</td>
|
|
<td>2018 UY</td>
|
|
<td>190m-420m</td>
|
|
<td>7.412</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3 id="images">Images</h3>
|
|
<figure>
|
|
<img src="https://images.unsplash.com/photo-1477346611705-65d1883cee1e?auto=format&fit=crop&w=1000&q=80"
|
|
loading="lazy" alt="Mountain landscape" width="600" height="400" />
|
|
<figcaption>
|
|
Mountain landscape by
|
|
<a href="https://unsplash.com/@heytowner">John Towner</a>.
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<h2 id="miscellaneous">Miscellaneous</h2>
|
|
|
|
<h3 id="scroll-overflow">Scroll Overflow</h3>
|
|
<p>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 <code>scroll-wrapper</code> to
|
|
allow scrolling on the x-axis. Large tables should also be wrapped with this class.</p>
|
|
<p>Below is an example of a long equation with overflow scroll.</p>
|
|
<div class="scroll-wrapper">
|
|
$$(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$$
|
|
</div>
|
|
|
|
<h3 id="syntax-highlighting">Syntax Highlighting</h3>
|
|
<p>If you need syntax highlighting for code, LaTeX.css provides a <a href="https://prismjs.com/">PrismJS</a> theme
|
|
that immitates the <a href="https://github.com/gpoore/minted">minted</a> package for LaTeX. Add the following
|
|
stylesheet and script:</p>
|
|
<pre><code class="language-html"><link rel="stylesheet" href="https://latex.vercel.app/prism/prism.css">
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/prismjs/prism.min.js"></script></code></pre>
|
|
<p>And use it like this:</p>
|
|
<pre><code class="language-html"><pre>
|
|
<code class="language-html">
|
|
<!-- your HTML code snippet -->
|
|
</code>
|
|
</pre></code></pre>
|
|
<p>Change which languages Prism highlights by customising the script <a href="https://prismjs.com/download.html">here</a>.</p>
|
|
|
|
<div class="footnotes">
|
|
<p id="fn1">
|
|
1. From
|
|
<a
|
|
href="https://www.math.brown.edu/~res/MFS/handout8.pdf">https://www.math.brown.edu/~res/MFS/handout8.pdf</a>.
|
|
<a href="#ref1" title="Jump back to footnote 1 in the text.">↩</a>
|
|
</p>
|
|
<p id="fn2">
|
|
2. “Definition.” Merriam-Webster.com Dictionary, Merriam-Webster,
|
|
<a
|
|
href="https://www.merriam-webster.com/dictionary/definition">https://www.merriam-webster.com/dictionary/definition</a>.
|
|
Accessed 18 May. 2020.
|
|
<a href="#ref2" title="Jump back to footnote 2 in the text.">↩</a>
|
|
</p>
|
|
</div>
|
|
</article>
|
|
</main>
|
|
|
|
<script>
|
|
MathJax = {
|
|
tex: {
|
|
inlineMath: [['$', '$'],],
|
|
},
|
|
}
|
|
const typeFaceToggle = document.getElementById('typeface-toggle')
|
|
const typeface = document.getElementById('typeface')
|
|
typeFaceToggle.addEventListener('click', () => {
|
|
document.body.classList.toggle('libertinus')
|
|
typeface.textContent = document.body.classList.contains('libertinus') ? 'Libertinus' : 'Latin Modern'
|
|
})
|
|
|
|
const darkModeToggle = document.getElementById('dark-mode-toggle')
|
|
darkModeToggle.addEventListener('click', () => {
|
|
document.body.classList.toggle('latex-dark')
|
|
})
|
|
</script>
|
|
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
|
|
<script async src="prism/prism.js"></script>
|
|
|
|
</body>
|
|
|
|
</html>
|