Files
KaTeX/website/pages/index.html
Fons van der Plas 8c2d852c4a fix(copy-tex): Use JS (instead of CSS) to select full equation, solving display glitches (#3586)
* copy-tex: Use JS to select full equation instead of CSS

* remove CSS

* Update webpack.common.js

* more build tweaks

* Update contrib/copy-tex/copy-tex.js

Co-authored-by: Erik Demaine <edemaine@mit.edu>

* Document new behavior

BREAKING CHANGE: copy-tex extension no longer has (or requires) a CSS file.

* Code cleanup, lint fixes, port to Flow

* Rewrite to extend both start and end of range

* Remove contrib/**/*.css linting

Co-authored-by: Erik Demaine <edemaine@mit.edu>
2022-06-06 12:09:30 -04:00

201 lines
16 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<!-- This page uses following open source software:
* Lato Fonts by Lukasz Dziedzic - http://www.latofonts.com/
License - SIL OFL 1.1 (https://scripts.sil.org/OFL)
* Font Awesome Free 5.2.0 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license (Icons: CC BY 4.0, Code: MIT License) -->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KaTeX The fastest math typesetting library for the web</title>
<meta name="Description" content="KaTeX The fastest math typesetting library for the web">
<meta property="og:title" content="KaTeX The fastest math typesetting library for the web">
<meta property="og:type" content="website">
<meta property="og:url" content="https://katex.org/">
<meta property="og:image" content="https://katex.org/img/og_logo.png">
<meta property="og:description" content="Simple API, no dependencies yet super fast on all major browsers.">
<link rel="preload" href="static/fonts/KaTeX_Main-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="static/fonts/KaTeX_Math-Italic.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="static/fonts/KaTeX_Size2-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="static/fonts/KaTeX_Size4-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,700,700i">
<link rel="stylesheet" href="static/katex.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="static/index.css">
<script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.1/dist/clipboard.min.js" integrity="sha256-hIvIxeqhGZF+VVeM55k0mJvWpQ6gTkWk3Emc+NmowYA=" crossorigin="anonymous"></script>
<script defer src="static/katex.min.js" crossorigin="anonymous"></script>
<script defer src="static/mhchem.min.js" crossorigin="anonymous"></script>
<script defer src="static/copy-tex.min.js" crossorigin="anonymous"></script>
<script defer src="js/index.js" type="text/javascript"></script>
<script defer src="https://cdn.jsdelivr.net/npm/webfontloader@1.6.28/webfontloader.js" integrity="sha256-4O4pS1SH31ZqrSO2A/2QJTVjTPqVe+jnYgOWUVr7EEc=" crossorigin="anonymous"></script>
</head>
<body>
<div class="header"><div class="container">
<h1 class="logo tex" data-expr="\KaTeX">KaTeX</h1>
<div class="tagline">
The <em>fastest</em> math typesetting library for the web.
</div>
<div class="cta">
<a href="docs/browser.html" role="button">
<svg class="svg-inline--fa fa-download fa-w-16" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path></svg>
Installation
</a>
<a href="docs/api.html" role="button">
<svg class="svg-inline--fa fa-book fa-w-14" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z"></path></svg>
Documentation
</a>
<a href="https://github.com/KaTeX/KaTeX" role="button">
<svg class="svg-inline--fa fa-github fa-w-16" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg>
View on GitHub
</a>
</div>
<div class="demo">
<div class="demo-left">
<div class="demo-instructions">
<label for="demo-input">Type an expression:</label>
<a id="options" aria-label="Options">
<svg class="svg-inline--fa fa-cog fa-w-16" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M444.788 291.1l42.616 24.599c4.867 2.809 7.126 8.618 5.459 13.985-11.07 35.642-29.97 67.842-54.689 94.586a12.016 12.016 0 0 1-14.832 2.254l-42.584-24.595a191.577 191.577 0 0 1-60.759 35.13v49.182a12.01 12.01 0 0 1-9.377 11.718c-34.956 7.85-72.499 8.256-109.219.007-5.49-1.233-9.403-6.096-9.403-11.723v-49.184a191.555 191.555 0 0 1-60.759-35.13l-42.584 24.595a12.016 12.016 0 0 1-14.832-2.254c-24.718-26.744-43.619-58.944-54.689-94.586-1.667-5.366.592-11.175 5.459-13.985L67.212 291.1a193.48 193.48 0 0 1 0-70.199l-42.616-24.599c-4.867-2.809-7.126-8.618-5.459-13.985 11.07-35.642 29.97-67.842 54.689-94.586a12.016 12.016 0 0 1 14.832-2.254l42.584 24.595a191.577 191.577 0 0 1 60.759-35.13V25.759a12.01 12.01 0 0 1 9.377-11.718c34.956-7.85 72.499-8.256 109.219-.007 5.49 1.233 9.403 6.096 9.403 11.723v49.184a191.555 191.555 0 0 1 60.759 35.13l42.584-24.595a12.016 12.016 0 0 1 14.832 2.254c24.718 26.744 43.619 58.944 54.689 94.586 1.667 5.366-.592 11.175-5.459 13.985L444.788 220.9a193.485 193.485 0 0 1 0 70.2zM336 256c0-44.112-35.888-80-80-80s-80 35.888-80 80 35.888 80 80 80 80-35.888 80-80z"></path></svg>
</a>
</div>
<textarea id="demo-input" spellcheck="false">
% \f is defined as #1f(#2) using the macro
\f\relax{x} = \int_{-\infty}^\infty
\f\hat\xi\,e^{2 \pi i \xi x}
\,d\xi</textarea>
</div>
<div class="demo-right">
<div class="demo-instructions">
See how it renders with <span class="tex" data-expr="\KaTeX">KaTeX</span>:
</div>
<div id="demo-output"></div>
</div>
</div>
</div></div>
<div class="main"><div class="container">
<div class="subtagline">
Simple API, no dependencies yet super fast on all major browsers.
</div>
<ul class="features">
<li><b>Fast:</b> KaTeX renders its math synchronously and doesn&rsquo;t need to reflow the page.</li>
<li><b>Print quality:</b> KaTeX&rsquo;s layout is based on Donald Knuth&rsquo;s TeX, the gold standard for math typesetting.</li>
<li><b>Self contained:</b> KaTeX has no dependencies and can easily be bundled with your website resources.</li>
<li><b>Server side rendering:</b> KaTeX produces the same output regardless of browser or environment, so you can pre-render expressions using Node.js and send them as plain HTML.</li>
</ul>
<div class="examples">
<div class="example tex" data-expr="\displaystyle \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }"></div>
<div class="example tex" data-expr="\displaystyle \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)"></div>
<div class="example tex" data-expr="\displaystyle {1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots }= \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \quad\quad \text{for }\lvert q\rvert<1."></div>
</div>
<div class="subtagline">
Lightning-fast, even on pages with hundreds of expressions:
</div>
<div class="comparison-labels">
<div class="left tex" data-expr="\KaTeX"></div>
<div class="right">MathJax</div>
</div>
<div class="comparison"></div>
<div class="cta">
<a href="docs/node.html" role="button">
<svg class="svg-inline--fa fa-download fa-w-16" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path></svg>
Installation
</a>
<a href="docs/api.html" role="button">
<svg class="svg-inline--fa fa-book fa-w-14" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z"></path></svg>
Documentation
</a>
<a href="https://github.com/KaTeX/KaTeX" role="button">
<svg class="svg-inline--fa fa-github fa-w-16" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg>
View on GitHub
</a>
</div>
</div></div>
<div class="footer"><div class="container">
<a class="ka-logo" href="https://www.khanacademy.org/"><img src="img/khan-academy-white.svg" alt="Khan Academy" width="172" height="28"></a>
<span class="credits">
Created by <a href="https://github.com/xymostech">Emily Eisenberg</a> and <a href="https://sophiebits.com/">Sophie Alpert</a>
<br><a href="https://github.com/KaTeX/KaTeX/blob/main/LICENSE">MIT License</a> · Built from the hard work of <a href="https://github.com/KaTeX/KaTeX/graphs/contributors">many contributors</a>
<br>Cross-browser testing via <a href="https://www.browserstack.com"><img src="/img/browserstack-logo.svg" alt="Browserstack"></a>
<br>This site is powered by <a href="https://www.netlify.com">Netlify</a>
</span>
</div></div>
<div id="options-panel">
<h3>KaTeX Options</h3>
<table>
<tr>
<td><label for="displayMode">displayMode</label></td>
<td><input type="checkbox" id="displayMode" checked/></td>
</tr>
<tr>
<td><label for="leqno">leqno</label></td>
<td><input type="checkbox" id="leqno"/></td>
</tr>
<tr>
<td><label for="fleqn">fleqn</label></td>
<td><input type="checkbox" id="fleqn"/></td>
</tr>
<tr>
<td><label for="throwOnError">throwOnError</label></td>
<td><input type="checkbox" id="throwOnError" checked/></td>
</tr>
<tr>
<td><label for="errorColor">errorColor</label></td>
<td><input type="color" id="errorColor" value="#cc0000"/></td>
</tr>
<tr>
<td><label for="strict">strict</label></td>
<td>
<select id="strict">
<option value="error">error</option>
<option value="warn" selected>warn</option>
<option value="ignore">ignore</option>
</select>
</td>
</tr>
<tr>
<td><label for="output">output</label></td>
<td>
<select id="output">
<option value="htmlAndMathml" selected>htmlAndMathml</option>
<option value="html">html</html>
<option value="mathml">mathml</option>
</select>
</td>
</tr>
<tr>
<td><label for="trust">trust</label></td>
<td><input type="checkbox" id="trust"/></td>
</tr>
</table>
<h4><label for="macros">macros</label></h4>
<textarea id="macros" placeholder="JSON">
{
"\\f": "#1f(#2)"
}</textarea>
<h3>Editor Options</h3>
<div><button id="maximize">Maximize editor</button></div>
<div><button id="code">Copy KaTeX code</button></div>
<div><button id="permalink">Copy Permalink</button></div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-54842501-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>