Quick tire kick of KaTeX.
npm install
npm run demo
Last active
August 29, 2015 14:09
-
-
Save joyrexus/db908a7a030a7c55c6ce to your computer and use it in GitHub Desktop.
KaTeX demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.min.css"> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.min.js"></script> | |
| <style> | |
| .example { | |
| font-size: 50px; | |
| text-align: center; | |
| margin: 200px 0; | |
| } | |
| </style> | |
| <body> | |
| <div class="example tex"> | |
| <span class="katex"><span class="katex-inner"><span class="strut" style="height:0.913389em;"></span><span class="strut bottom" style="height:1.04em;vertical-align:-0.12661100000000008em;"></span><span class="base textstyle uncramped"><span class="mord mathit" style="color:#9C0;">c</span><span class="mrel">=</span><span class="mord">±</span><span class="sqrt mord"><span class="sqrt-sign" style="top:-0.07338899999999993em;"><span class="style-wrap reset-textstyle textstyle uncramped">√</span></span><span class="vlist"><span style="top:0em;"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:1em;"></span></span><span class="mord textstyle cramped"><span class="mord"><span class="mord mathit">a</span><span class="vlist"><span style="top:-0.289em;margin-right:0.05em;"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span><span class="reset-textstyle scriptstyle cramped"><span class="mord">2</span></span></span><span class="baseline-fix"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span></span></span></span><span class="mbin">+</span><span class="mord"><span class="mord mathit" style="color:#F44;">b</span><span class="vlist"><span style="top:-0.289em;margin-right:0.05em;"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span><span class="reset-textstyle scriptstyle cramped"><span class="mord" style="color:#F44;">2</span></span></span><span class="baseline-fix"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span></span></span></span></span></span><span style="top:-0.8333889999999999em;"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:1em;"></span></span><span class="reset-textstyle textstyle uncramped sqrt-line"></span></span><span class="baseline-fix"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:1em;"></span></span></span></span></span></span></span></span> | |
| </div> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.min.css"> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.min.js"></script> | |
| <style> | |
| .example { | |
| font-size: 50px; | |
| text-align: center; | |
| margin: 200px 0; | |
| } | |
| </style> | |
| <body> | |
| <div class="example tex"> | |
| {{{insert}}} | |
| </div> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.min.css"> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.min.js"></script> | |
| <style> | |
| .example { | |
| font-size: 30px; | |
| text-align: center; | |
| margin: 30px 0; | |
| } | |
| </style> | |
| <body> | |
| <div class="example tex" data-expr="c = \pm\sqrt{a^2 + b^2}"> | |
| </div> | |
| <script> | |
| window.onload = function() { | |
| var tex = document.getElementsByClassName("tex"); | |
| Array.prototype.forEach.call(tex, function(el) { | |
| katex.render(el.getAttribute("data-expr"), el); | |
| }); | |
| }; | |
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "katex-demo", | |
| "version": "0.0.0", | |
| "description": "quick katex tire kick", | |
| "main": "render.js", | |
| "dependencies": { | |
| "katex": "~0.1.1", | |
| "mustache": "~0.8.2" | |
| }, | |
| "devDependencies": {}, | |
| "scripts": { | |
| "demo": "node render.js > index.html; open index.html" | |
| }, | |
| "keywords": [ | |
| "katex", | |
| "latex" | |
| ], | |
| "author": "joyrexus", | |
| "license": "BSD-2-Clause" | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| var fs = require('fs'); | |
| var mustache = require('mustache'); | |
| var katex = require('katex'); | |
| var formula = '\\color{#9C0}c = \\pm\\sqrt{a^2 + \\color{#F44}{b^2} }'; | |
| var view = { | |
| insert: katex.renderToString(formula) | |
| }; | |
| fs.readFile('index.mustache', 'utf-8', function (err, data) { | |
| if (err) { throw err; } | |
| var output = mustache.render(data.toString(), view); | |
| console.log(output); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment