Add latex-inline and katex-display

justinfagnani · Apr 7, 2015 · 1eb2820 · 1eb2820
1 parent 5c74fb3
commit 1eb2820
Show file tree

Hide file tree

Showing 58 changed files with 216 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+bower_components/
diff --git a/README.md b/README.md
@@ -1,2 +1,40 @@
 # katex-elements
-Custom elements for easily using KaTeX
+Custom elements for easily using [KaTeX][katex]
+
+[katex]: https://github.com/Khan/KaTeX
+
+##Usage
+
+### 1. Import the elements
+
+```html
+<link rel="import" href="../katex-elements/katex-elements.html">
+```
+
+### 2. Use the elements!
+
+## &lt;katex-inline&gt;
+
+Renders its text content in inline mode.
+
+###markup:
+
+```html
+<katex-inline>c = \pm\sqrt{a^2 + b^2}</katex-inline>
+```
+
+###output:
+<img src="readme-katex-inline.png">
+
+##&lt;katex-display&gt;
+
+Renders its text content in display mode, which will put the math in display style (so `\int` and `\sum` are large, for example), and will center the math in a block element.
+
+###markup:
+
+```html
+<katex-display>c = \pm\sqrt{a^2 + b^2}</katex-display>
+```
+
+###output:
+<img src="readme-katex-display.png">
diff --git a/bower.json b/bower.json
@@ -0,0 +1,10 @@
+{
+  "name": "katex-elements",
+  "dependencies": {
+    "polymer": "Polymer/polymer#0.8-preview"
+  },
+  "devDependencies": {
+    "webcomponentsjs": "webcomponents/webcomponentsjs"
+  },
+  "version": "0.1.0"
+}
diff --git a/demo.html b/demo.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+  <head>
+    <link rel="import" href="katex-elements.html">
+    <style>
+      code {
+        color: #2a2;
+      }
+      .tag {
+        color: #e44;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div>
+      <h2>&lt;katex-inline&gt;</h2>
+      <h3>markup:</h3>
+      <code>
+        <span class="tag">&lt;katex-inline&gt;</span>
+        c = \pm\sqrt{a^2 + b^2}
+        <span class="tag">&lt;/katex-inline&gt;</span></code>
+      <h3>output:</h3>
+      <katex-inline>c = \pm\sqrt{a^2 + b^2}</katex-inline>
+    </div>
+
+    <div>
+      <h2>&lt;katex-display&gt;</h2>
+      <h3>markup:</h3>
+      <code>
+        <span class="tag">&lt;katex-display&gt;</span>
+        c = \pm\sqrt{a^2 + b^2}
+        <span class="tag">&lt;/katex-display&gt;</span>
+      </code>
+      <h3>output:</h3>
+      <katex-display>c = \pm\sqrt{a^2 + b^2}</katex-display>
+    </div>
+
+  </body>
+</html>
diff --git a/katex-display.html b/katex-display.html
@@ -0,0 +1,28 @@
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="katex-js.html">
+
+<dom-module id="katex-display">
+  <style>
+    :host {
+      display: block;
+    }
+  </style>
+  <template></template>
+</dom-module>
+
+<script>
+(function() {
+
+  Polymer({
+    is: 'katex-display',
+
+    ready() {
+      var children = Array.prototype.slice.call(Polymer.dom(this).childNodes);
+      var textContent = children.map(function(c) { return c.textContent; }).join('');
+      katex.render(textContent, Polymer.dom(this.root), { displayMode: true });
+    },
+
+  });
+
+})();
+</script>
diff --git a/katex-elements.html b/katex-elements.html
@@ -0,0 +1,2 @@
+<link rel="import" href="katex-inline.html">
+<link rel="import" href="katex-display.html">
diff --git a/katex-inline.html b/katex-inline.html
@@ -0,0 +1,26 @@
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="katex-js.html">
+
+<dom-module id="katex-inline">
+  :host {
+    display: inline;
+  }
+  <template></template>
+</dom-module>
+
+<script>
+(function() {
+
+  Polymer({
+    is: 'katex-inline',
+
+    ready() {
+      var children = Array.prototype.slice.call(Polymer.dom(this).childNodes);
+      var textContent = children.map(function(c) { return c.textContent; }).join('');
+      katex.render(textContent, Polymer.dom(this.root));
+    },
+
+  });
+
+})();
+</script>
diff --git a/katex-js.html b/katex-js.html
@@ -0,0 +1,2 @@
+<script src="third_party/katex/katex.min.js"></script>
+<link rel="stylesheet" href="third_party/katex/katex.min.css">
diff --git a/readme-katex-display.png b/readme-katex-display.png
diff --git a/readme-katex-inline.png b/readme-katex-inline.png
diff --git a/third_party/katex/README.md b/third_party/katex/README.md
@@ -0,0 +1,62 @@
+# [<img src="https://khan.github.io/KaTeX/katex-logo.svg" width="130" alt="KaTeX">](https://khan.github.io/KaTeX/) [![Build Status](https://travis-ci.org/Khan/KaTeX.svg?branch=master)](https://travis-ci.org/Khan/KaTeX)
+
+KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web.
+
+ * **Fast:** KaTeX renders its math synchronously and doesn't need to reflow the page. See how it compares to a competitor in [this speed test](http://jsperf.com/katex-vs-mathjax/).
+ * **Print quality:** KaTeX’s layout is based on Donald Knuth’s TeX, the gold standard for math typesetting.
+ * **Self contained:** KaTeX has no dependencies and can easily be bundled with your website resources.
+ * **Server side rendering:** 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.
+
+KaTeX supports all major browsers, including Chrome, Safari, Firefox, Opera, and IE 8 - IE 11.
+
+## Usage
+
+You can [download KaTeX](https://github.com/khan/katex/releases) and host it on your server or include the `katex.min.js` and `katex.min.css` files on your page directly from a CDN:
+
+```html
+<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.2.0/katex.min.css">
+<script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.2.0/katex.min.js"></script>
+```
+
+#### In-browser rendering
+
+Call `katex.render` with a TeX expression and a DOM element to render into:
+
+```js
+katex.render("c = \\pm\\sqrt{a^2 + b^2}", element);
+```
+
+#### Server side rendering or rendering to a string
+
+To generate HTML on the server or to generate an HTML string of the rendered math, you can use `katex.renderToString`:
+
+```js
+var html = katex.renderToString("c = \\pm\\sqrt{a^2 + b^2}");
+// '<span class="katex">...</span>'
+```
+
+Make sure to include the CSS and font files, but there is no need to include the JavaScript.
+
+#### Rendering options
+
+You can provide an object of options as the last argument to `katex.render` and `katex.renderToString`. Available options are:
+
+- `displayMode`: `boolean`. If `true` the math will be rendered in display mode, which will put the math in display style (so `\int` and `\sum` are large, for example), and will center the math on the page on its own line. If `false` the math will be rendered in inline mode. (default: `false`)
+
+For example:
+
+```js
+katex.render("c = \\pm\\sqrt{a^2 + b^2}", element, { displayMode: true });
+```
+
+#### Automatic rendering of math on a page
+
+Math on the page can be automatically rendered using the auto-render extension. See [the Auto-render README](contrib/auto-render/README.md) for more information.
+
+## Contributing
+
+See [CONTRIBUTING.md](CONTRIBUTING.md)
+
+## License
+
+KaTeX is licensed under the [MIT License](http://opensource.org/licenses/MIT).
diff --git a/third_party/katex/contrib/auto-render.min.js b/third_party/katex/contrib/auto-render.min.js
diff --git a/third_party/katex/fonts/KaTeX_AMS-Regular.eot b/third_party/katex/fonts/KaTeX_AMS-Regular.eot
diff --git a/third_party/katex/fonts/KaTeX_AMS-Regular.ttf b/third_party/katex/fonts/KaTeX_AMS-Regular.ttf
diff --git a/third_party/katex/fonts/KaTeX_AMS-Regular.woff b/third_party/katex/fonts/KaTeX_AMS-Regular.woff
diff --git a/third_party/katex/fonts/KaTeX_AMS-Regular.woff2 b/third_party/katex/fonts/KaTeX_AMS-Regular.woff2
diff --git a/third_party/katex/fonts/KaTeX_Main-Bold.eot b/third_party/katex/fonts/KaTeX_Main-Bold.eot
diff --git a/third_party/katex/fonts/KaTeX_Main-Bold.ttf b/third_party/katex/fonts/KaTeX_Main-Bold.ttf
diff --git a/third_party/katex/fonts/KaTeX_Main-Bold.woff b/third_party/katex/fonts/KaTeX_Main-Bold.woff
diff --git a/third_party/katex/fonts/KaTeX_Main-Bold.woff2 b/third_party/katex/fonts/KaTeX_Main-Bold.woff2
diff --git a/third_party/katex/fonts/KaTeX_Main-Italic.eot b/third_party/katex/fonts/KaTeX_Main-Italic.eot
diff --git a/third_party/katex/fonts/KaTeX_Main-Italic.ttf b/third_party/katex/fonts/KaTeX_Main-Italic.ttf
diff --git a/third_party/katex/fonts/KaTeX_Main-Italic.woff b/third_party/katex/fonts/KaTeX_Main-Italic.woff
diff --git a/third_party/katex/fonts/KaTeX_Main-Italic.woff2 b/third_party/katex/fonts/KaTeX_Main-Italic.woff2
diff --git a/third_party/katex/fonts/KaTeX_Main-Regular.eot b/third_party/katex/fonts/KaTeX_Main-Regular.eot
diff --git a/third_party/katex/fonts/KaTeX_Main-Regular.ttf b/third_party/katex/fonts/KaTeX_Main-Regular.ttf
diff --git a/third_party/katex/fonts/KaTeX_Main-Regular.woff b/third_party/katex/fonts/KaTeX_Main-Regular.woff
diff --git a/third_party/katex/fonts/KaTeX_Main-Regular.woff2 b/third_party/katex/fonts/KaTeX_Main-Regular.woff2
diff --git a/third_party/katex/fonts/KaTeX_Math-BoldItalic.eot b/third_party/katex/fonts/KaTeX_Math-BoldItalic.eot
diff --git a/third_party/katex/fonts/KaTeX_Math-BoldItalic.ttf b/third_party/katex/fonts/KaTeX_Math-BoldItalic.ttf
diff --git a/third_party/katex/fonts/KaTeX_Math-BoldItalic.woff b/third_party/katex/fonts/KaTeX_Math-BoldItalic.woff
diff --git a/third_party/katex/fonts/KaTeX_Math-BoldItalic.woff2 b/third_party/katex/fonts/KaTeX_Math-BoldItalic.woff2
diff --git a/third_party/katex/fonts/KaTeX_Math-Italic.eot b/third_party/katex/fonts/KaTeX_Math-Italic.eot
diff --git a/third_party/katex/fonts/KaTeX_Math-Italic.ttf b/third_party/katex/fonts/KaTeX_Math-Italic.ttf
diff --git a/third_party/katex/fonts/KaTeX_Math-Italic.woff b/third_party/katex/fonts/KaTeX_Math-Italic.woff
diff --git a/third_party/katex/fonts/KaTeX_Math-Italic.woff2 b/third_party/katex/fonts/KaTeX_Math-Italic.woff2
diff --git a/third_party/katex/fonts/KaTeX_Math-Regular.eot b/third_party/katex/fonts/KaTeX_Math-Regular.eot
diff --git a/third_party/katex/fonts/KaTeX_Math-Regular.ttf b/third_party/katex/fonts/KaTeX_Math-Regular.ttf
diff --git a/third_party/katex/fonts/KaTeX_Math-Regular.woff b/third_party/katex/fonts/KaTeX_Math-Regular.woff
diff --git a/third_party/katex/fonts/KaTeX_Math-Regular.woff2 b/third_party/katex/fonts/KaTeX_Math-Regular.woff2
diff --git a/third_party/katex/fonts/KaTeX_Size1-Regular.eot b/third_party/katex/fonts/KaTeX_Size1-Regular.eot
diff --git a/third_party/katex/fonts/KaTeX_Size1-Regular.ttf b/third_party/katex/fonts/KaTeX_Size1-Regular.ttf
diff --git a/third_party/katex/fonts/KaTeX_Size1-Regular.woff b/third_party/katex/fonts/KaTeX_Size1-Regular.woff
diff --git a/third_party/katex/fonts/KaTeX_Size1-Regular.woff2 b/third_party/katex/fonts/KaTeX_Size1-Regular.woff2
diff --git a/third_party/katex/fonts/KaTeX_Size2-Regular.eot b/third_party/katex/fonts/KaTeX_Size2-Regular.eot
diff --git a/third_party/katex/fonts/KaTeX_Size2-Regular.ttf b/third_party/katex/fonts/KaTeX_Size2-Regular.ttf
diff --git a/third_party/katex/fonts/KaTeX_Size2-Regular.woff b/third_party/katex/fonts/KaTeX_Size2-Regular.woff
diff --git a/third_party/katex/fonts/KaTeX_Size2-Regular.woff2 b/third_party/katex/fonts/KaTeX_Size2-Regular.woff2
diff --git a/third_party/katex/fonts/KaTeX_Size3-Regular.eot b/third_party/katex/fonts/KaTeX_Size3-Regular.eot
diff --git a/third_party/katex/fonts/KaTeX_Size3-Regular.ttf b/third_party/katex/fonts/KaTeX_Size3-Regular.ttf
diff --git a/third_party/katex/fonts/KaTeX_Size3-Regular.woff b/third_party/katex/fonts/KaTeX_Size3-Regular.woff
diff --git a/third_party/katex/fonts/KaTeX_Size3-Regular.woff2 b/third_party/katex/fonts/KaTeX_Size3-Regular.woff2
diff --git a/third_party/katex/fonts/KaTeX_Size4-Regular.eot b/third_party/katex/fonts/KaTeX_Size4-Regular.eot
diff --git a/third_party/katex/fonts/KaTeX_Size4-Regular.ttf b/third_party/katex/fonts/KaTeX_Size4-Regular.ttf
diff --git a/third_party/katex/fonts/KaTeX_Size4-Regular.woff b/third_party/katex/fonts/KaTeX_Size4-Regular.woff
diff --git a/third_party/katex/fonts/KaTeX_Size4-Regular.woff2 b/third_party/katex/fonts/KaTeX_Size4-Regular.woff2
diff --git a/third_party/katex/katex.min.css b/third_party/katex/katex.min.css
diff --git a/third_party/katex/katex.min.js b/third_party/katex/katex.min.js