mirror of
https://github.com/vincentdoerig/latex-css.git
synced 2024-09-11 13:06:14 +03:00
195 lines
8.4 KiB
HTML
195 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>LaTeX.css — Make your website look like a LaTeX document</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
|
|
<body id="top">
|
|
<header>
|
|
<h1>LaTeX.css</h1>
|
|
<p class="author">Vincent Dörig <br> May 2020</p>
|
|
</header>
|
|
|
|
<div class="abstract">
|
|
<h4>Abstract</h4>
|
|
<p>This almost class-less CSS framework 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><link rel="stylesheet" href="https://latex.now.sh/style.css"></code> to the
|
|
<code><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">
|
|
<h3>Contents</h3>
|
|
<ol>
|
|
<li><a href="#getting-started">Getting Started</a> </li>
|
|
<li><a href="#cbe">Class-based Elements</a>
|
|
<ol>
|
|
<li><a href="#author-abstract">Author and Abstract</a></li>
|
|
<li><a href="#tdpl">Theorems, Definitions and Proofs
|
|
<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>
|
|
</a></li>
|
|
</li>
|
|
</ol>
|
|
</li>
|
|
<li><a href="#html-elements">HTML Elements</a></li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<main>
|
|
<article>
|
|
<h2 id="getting-started">Getting Started</h2>
|
|
<ul>
|
|
<li>Add <code><link rel="stylesheet" href="https://latex.now.sh/style.css"></code> to the
|
|
<code><head></code> of your website.</li>
|
|
<li>(opitional) Add any classes to elmenents described in the <a href="#cbe">next section</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><script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script></code></pre>
|
|
</li>
|
|
<li>Done.</li>
|
|
</ul>
|
|
<h2 id="cbe">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><p class="author">John Doe <br> December 7, 2020</p>
|
|
|
|
<div class="abstract">
|
|
<h4>Abstract</h4>
|
|
<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><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$ 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.</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>
|
|
<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>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>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>Definition List</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>Tables</h3>
|
|
<table>
|
|
<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>
|
|
<h3>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" title="">
|
|
<figcaption>Mountain landscape by <a href="https://unsplash.com/@heytowner">John Towner</a>.</figcaption>
|
|
</figure>
|
|
<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 id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
|
|
<script>
|
|
MathJax = {
|
|
tex: {
|
|
inlineMath: [['$', '$'], ['\\(', '\\)']]
|
|
}
|
|
};
|
|
</script>
|
|
<script async defer src="https://scripts.simpleanalyticscdn.com/latest.js"></script>
|
|
<noscript><img src="https://queue.simpleanalyticscdn.com/noscript.gif" alt=""></noscript>
|
|
</body>
|
|
|
|
</html>
|