mirror of
https://github.com/vincentdoerig/latex-css.git
synced 2024-09-11 04:46:36 +03:00
Add a demo showing the language support
- add languages.html - add a section on languages on index.html - link back to the languages page - format html files
This commit is contained in:
parent
254eba0011
commit
9c35782521
@ -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.
|
||||
|
206
index.html
206
index.html
@ -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><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>.
|
||||
<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="#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>
|
||||
@ -51,7 +60,9 @@
|
||||
</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>
|
||||
@ -67,21 +78,33 @@
|
||||
<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 or install the package using <code>npm install latex.css</code>.
|
||||
<li>
|
||||
Add
|
||||
<code><link rel="stylesheet"
|
||||
href="https://latex.now.sh/style.css"></code>
|
||||
to the <code><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>
|
||||
(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><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="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><p class="author">John Doe <br> December 7, 2020</p>
|
||||
|
||||
<div class="abstract">
|
||||
@ -90,8 +113,11 @@
|
||||
</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>
|
||||
<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>
|
||||
@ -99,53 +125,94 @@
|
||||
<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 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><link rel="stylesheet" href="https://latex.now.sh/lang/es.css" />
|
||||
...
|
||||
<html lang="es"></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>
|
||||
@ -180,20 +247,31 @@
|
||||
</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>
|
||||
@ -201,14 +279,14 @@
|
||||
<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>
|
||||
|
81
languages.html
Normal file
81
languages.html
Normal file
@ -0,0 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>LaTeX.css — Language Support</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>
|
||||
<span class="latex">L<span>a</span>T<span>e</span>X</span>.css Language
|
||||
Support
|
||||
</h1>
|
||||
|
||||
<div class="abstract">
|
||||
<h5>Abstract</h5>
|
||||
<p>
|
||||
LaTeX.css prefixes elements with a class name of
|
||||
<a href="/#tdpl">theorem, definition, lemma or proof</a> with a
|
||||
corresponding label. They are in English by default, but it is possible
|
||||
to change it to a
|
||||
<a href="https://github.com/vincentdoerig/latex-css/tree/master/lang">supported language</a>,
|
||||
by setting the <code>lang</code> attribute to the desired language code
|
||||
and importing the corresponding language file (<code><link rel="stylesheet" href="https://latex.now.sh/lang/[lang].css"
|
||||
/></code>) in addition to the main stylesheet.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<article>
|
||||
<p>
|
||||
Here is a quick demo demonstrating LaTeX.css' language support. If want
|
||||
to support a language that isn't listed here, feel free to open a PR/issue on
|
||||
<a href="https://github.com/vincentdoerig/latex-css">GitHub</a>.
|
||||
</p>
|
||||
<label for="language-select">Choose a language:</label>
|
||||
|
||||
<select name="language" id="language-select">
|
||||
<option value="en">English (en)</option>
|
||||
<!-- ↓ Sort alphabetically ↓ -->
|
||||
<option value="de">German (de)</option>
|
||||
<option value="dk">Danish (dk)</option>
|
||||
<option value="es">Spanish (es)</option>
|
||||
<option value="fr">French (fr)</option>
|
||||
<option value="it">Italian (it)</option>
|
||||
<option value="ja">Japanese (ja)</option>
|
||||
<option value="mwl">Mirandese (mwl)</option>
|
||||
<option value="pt">Portuguese (pt)</option>
|
||||
<option value="ro">Romanian (ro)</option>
|
||||
</select>
|
||||
|
||||
<div id="wrapper">
|
||||
<div class="theorem">Hello, I'm a theorem.</div>
|
||||
<div class="definition">This is a definition.</div>
|
||||
<div class="lemma">And this is a lemma.</div>
|
||||
<div class="proof">And we also got a proof.</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<script>
|
||||
const selection = document.getElementById('language-select');
|
||||
const wrapper = document.getElementById('wrapper');
|
||||
|
||||
selection.addEventListener('change', () => {
|
||||
const selectedLanguage = selection.options[selection.selectedIndex].value;
|
||||
wrapper.lang = selectedLanguage;
|
||||
if (selectedLanguage !== 'en') {
|
||||
const link = document.createElement('link');
|
||||
link.setAttribute('rel', "stylesheet");
|
||||
link.setAttribute('href', `lang/${selectedLanguage}.css`);
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
});
|
||||
</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>
|
Loading…
Reference in New Issue
Block a user