Skip to content

Commit

Permalink
Add a demo showing the language support
Browse files Browse the repository at this point in the history 
- add languages.html
- add a section on languages on index.html
- link back to the languages page
- format html files
  • Loading branch information
@vincentdoerig
vincentdoerig committed May 28, 2020
1 parent 254eba0 commit 9c35782
Show file tree
Hide file tree
Showing 3 changed files with 225 additions and 64 deletions.
2 changes: 2 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,8 @@ and changing the html `lang` attribute:
<html lang="es">
```

Have a look at the [language support page](https://latex.now.sh/languages) for more info and a demo of the different languages.

## Contributing

Contributions, feedback and issues are welcome. Feel free to fork, comment, critique, or submit a pull request.
Expand Down
206 changes: 142 additions & 64 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,47 +2,56 @@
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>

<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.now.sh">
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.now.sh" />
<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">
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="style.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>
<p class="author">
Vincent Dörig <br />
May 2020
</p>
</header>

<div class="abstract">
<h5>Abstract</h5>
<p>This almost class-less CSS library turns your HTML document into a website that looks like a
<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>&lt;link rel="stylesheet" href="https://latex.now.sh/style.css"&gt;</code> to the
<code>&lt;head&gt;</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>.
<code>&lt;link rel="stylesheet"
href="https://latex.now.sh/style.css"&gt;</code>
to the <code>&lt;head&gt;</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="#class-based-elements">Class-based Elements</a>
<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>
<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>
Expand All @@ -51,7 +60,9 @@ <h3>Contents</h3>
</li>
</ol>
</li>
<li><a href="#html-elements">HTML Elements</a>
<li><a href="#language-support">Language Support</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>
Expand All @@ -67,21 +78,33 @@ <h3>Contents</h3>
<article>
<h2 id="getting-started">Getting Started</h2>
<ul>
<li>Add <code>&lt;link rel="stylesheet" href="https://latex.now.sh/style.css"&gt;</code> to the
<code>&lt;head&gt;</code> of your website or install the package using <code>npm install latex.css</code>.
<li>
Add
<code>&lt;link rel="stylesheet"
href="https://latex.now.sh/style.css"&gt;</code>
to the <code>&lt;head&gt;</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>
(optional) Add any classes to elements described in the
<a href="#class-based-elements">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>:
<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>&lt;script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"&gt;&lt;/script&gt;</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>
<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>&lt;p class="author"&gt;John Doe &lt;br&gt; December 7, 2020&lt;/p&gt;

&lt;div class="abstract"&gt;
Expand All @@ -90,62 +113,106 @@ <h3 id="author-abstract">Author and Abstract</h3>
&lt;/div&gt;</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>
<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>&lt;div class="theorem"&gt;...&lt;/div&gt;
&lt;div class="definition"&gt;...&lt;/div&gt;
&lt;div class="lemma"&gt;...&lt;/div&gt;
&lt;div class="proof"&gt;...&lt;/div&gt;</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 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>
<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>
<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>
<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="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>&lt;link rel="stylesheet" href="https://latex.now.sh/lang/es.css" /&gt;
...
&lt;html lang="es"&gt;</code></pre>
<p>
Take a peak at the <a href="/languages">language support demo</a> to
see how the labels of the different languages change.
</p>
<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>
<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>
<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.
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>
<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>
<thead>
Expand Down Expand Up @@ -180,35 +247,46 @@ <h3 id="tables">Tables</h3>
</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>
loading="lazy" alt="Mountain landscape" width="600" height="400" />
<figcaption>
Mountain landscape by
<a href="https://unsplash.com/@heytowner">John Towner</a>.
</figcaption>
</figure>

<div class="footnotes">
<p id="fn1">1. From <a
<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="#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>
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: [['$', '$'], ['\\(', '\\)']]
}
inlineMath: [['$', '$'],],
},
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

<script async defer src="https://scripts.simpleanalyticscdn.com/latest.js"></script>
<noscript><img src="https://queue.simpleanalyticscdn.com/noscript.gif" alt=""></noscript>
<noscript><img src="https://queue.simpleanalyticscdn.com/noscript.gif" alt="" /></noscript>
</body>

</html>
Loading

1 comment on commit 9c35782

@vercel
Copy link

@vercel vercel bot commented on 9c35782 May 28, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to following URLs:

Please sign in to comment.