suzanne.soy/scribble-math
1
0
Fork 0
Code Issues 8 Pull Requests 3 Actions Packages Projects Releases Wiki Activity

Make stuff better

Browse Source
This commit is contained in:
Emily Eisenberg 2014-09-14 23:52:34 -07:00
parent 55e4f1a1b0
commit cd2b8de05f
3 changed files with 73 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
index.html
View File

@ -18,7 +18,7 @@
The <em>fastest</em> math typesetting library for the web.
</div>
<div class="cta">
<a href="#" role="button"><i class="fa fa-download"></i> Download</a><a href="https://github.com/Khan/KaTeX" role="button"><i class="fa fa-github"></i> View on GitHub</a>
<a href="https://github.com/Khan/KaTeX/releases" role="button"><i class="fa fa-download"></i> Download</a><a href="https://github.com/Khan/KaTeX" role="button"><i class="fa fa-github"></i> View on GitHub</a>
</div>
<div class="demo">
<div class="demo-left">
@ -43,17 +43,38 @@ f(x) = \int_{-\infty}^\infty
<div class="subtagline">
Simple API, no dependencies – yet super-fast on all major browsers.
</div>
<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>
<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="#" role="button"><i class="fa fa-download"></i> Download</a><a href="https://github.com/Khan/KaTeX" role="button"><i class="fa fa-github"></i> View on GitHub</a>
<a href="https://github.com/Khan/KaTeX/releases" role="button"><i class="fa fa-download"></i> Download</a><a href="https://github.com/Khan/KaTeX" role="button"><i class="fa fa-github"></i> View on GitHub</a>
</div>
</div></div>
<div class="footer"><div class="container">
<a class="ka-logo" href="https://www.khanacademy.org/"><img src="khan-academy.png" alt="Khan Academy" width="180" height="17"></a>
<span class="created-by">Created by <a href="https://github.com/xymostech">Emily Eisenberg</a> and <a href="http://benalpert.com/">Ben Alpert</a>
</div></div>
<script src="lib/katex/katex.min.js" type="text/javascript"></script>

BIN
katex-comparison.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 667 KiB

51
main.css
View File

@ -60,7 +60,7 @@ body {
.demo {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
font-size: 18px;
font-size: 22px;
margin: 50px 0 0;
}
@ -74,7 +74,7 @@ body {
.demo-right {
box-sizing: border-box;
float: left;
padding: 30px;
padding: 20px 30px;
width: 50%;
}
@ -122,18 +122,52 @@ body {
color: #329894;
font-size: 24px;
font-weight: 600;
padding: 10px 0;
padding: 20px 0;
text-align: center;
}
.main .features {
font-size: 20px;
margin: 0 auto;
width: 540px;
}
.main .examples {
margin: 40px 0;
}
.main .example {
font-size: 15px;
text-align: center;
margin: 30px 0;
}
.main .comparison-labels {
width: 100%;
height: 40px;
}
.main .comparison-labels .left,
.main .comparison-labels .right {
box-sizing: border-box;
width: 50%;
float: left;
height: 40px;
text-align: center;
font-size: 20px;
}
.main .comparison {
background-image: url(katex-comparison.gif);
background-position: 50% 50%;
background-size: cover;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
height: 340px;
width: 100%;
}
.main .cta {
padding-top: 30px;
padding-top: 50px;
}
.main .cta a {
@ -154,3 +188,12 @@ body {
border: none;
vertical-align: -1px;
}
.created-by {
float: right;
font-size: 18px;
}
.created-by a {
color: white;
}