mirror of
https://github.com/Smaug123/KaTeX
synced 2025-10-05 11:18:39 +00:00
KaTeX website & documentation (#1484)
* website/docs: initial commit * Change secondaryColor * Fix index.css not being copied and included on global stylesheet * Fix stylesheet link [skip ci] * Change documentation link to API(Usage) [skip ci] * Add `Libraries` in usage [skip ci] * Remove documentation from `README.md` and add link to the site [skip ci] * Use KaTeX in the parent directory to build Markdown [skip ci] * Revise function support page. Avoid error msgs. * General edit to function support page
This commit is contained in:
committed by
Kevin Barabash
parent
83e8eac0a5
commit
8a38035855
7
.gitignore
vendored
7
.gitignore
vendored
@@ -16,3 +16,10 @@ diff.png
|
||||
/test/symgroups.pdf
|
||||
/test/screenshotter/unicode-fonts
|
||||
coverage/
|
||||
lib/core/metadata.js
|
||||
lib/core/MetadataBlog.js
|
||||
website/translated_docs
|
||||
website/build/
|
||||
website/yarn.lock
|
||||
website/node_modules
|
||||
website/i18n/*
|
||||
|
126
README.md
126
README.md
@@ -14,9 +14,9 @@ KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the we
|
||||
|
||||
KaTeX supports all major browsers, including Chrome, Safari, Firefox, Opera, Edge, and IE 9 - IE 11. More information can be found on the [list of supported commands](https://khan.github.io/KaTeX/function-support.html) and on the [wiki](https://github.com/khan/katex/wiki).
|
||||
|
||||
## Usage
|
||||
## Getting started
|
||||
|
||||
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:
|
||||
[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="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.css" integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH" crossorigin="anonymous">
|
||||
@@ -51,127 +51,9 @@ var html = katex.renderToString("c = \\pm\\sqrt{a^2 + b^2}");
|
||||
|
||||
Make sure to include the CSS and font files, but there is no need to include the JavaScript. Like `render`, `renderToString` throws if it can't parse the expression.
|
||||
|
||||
#### Security
|
||||
## Documentation
|
||||
|
||||
Any HTML generated by KaTeX *should* be safe from `<script>` or other code
|
||||
injection attacks.
|
||||
(See `maxSize` below for preventing large width/height visual affronts,
|
||||
see `maxExpand` below for preventing infinite macro loop attacks, and
|
||||
see `allowedProtocols` below for preventing certain protocols in `\href`)
|
||||
Of course, it is always a good idea to sanitize the HTML, though you will need
|
||||
a rather generous whitelist (including some of SVG and MathML) to support
|
||||
all of KaTeX.
|
||||
|
||||
#### Handling errors
|
||||
|
||||
If KaTeX encounters an error (invalid or unsupported LaTeX) and `throwOnError`
|
||||
hasn't been set to `false`, then it will throw an exception of type
|
||||
`katex.ParseError`. The message in this error includes some of the LaTeX
|
||||
source code, so needs to be escaped if you want to render it to HTML.
|
||||
In particular, you should convert `&`, `<`, `>` characters to
|
||||
`&`, `<`, `>` (e.g., using `_.escape`)
|
||||
before including either LaTeX source code or exception messages in your
|
||||
HTML/DOM. (Failure to escape in this way makes a `<script>` injection
|
||||
attack possible if your LaTeX source is untrusted.)
|
||||
Alternatively, you can set `throwOnError` to `false` to use built-in behavior
|
||||
of rendering the LaTeX source code with hover text stating the error.
|
||||
|
||||
#### 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`)
|
||||
- `throwOnError`: `boolean`. If `true` (the default), KaTeX will throw a `ParseError` when it encounters an unsupported command or invalid LaTeX. If `false`, KaTeX will render unsupported commands as text, and render invalid LaTeX as its source code with hover text giving the error, in the color given by `errorColor`.
|
||||
- `errorColor`: `string`. A color string given in the format `"#XXX"` or `"#XXXXXX"`. This option determines the color that unsupported commands and invalid LaTeX are rendered in when `throwOnError` is set to `false`. (default: `#cc0000`)
|
||||
- `macros`: `object`. A collection of custom macros. Each macro is a property with a name like `\name` (written `"\\name"` in JavaScript) which maps to a string that describes the expansion of the macro. Single-character keys can also be included in which case the character will be redefined as the given macro (similar to TeX active characters). *This object will be modified* if the LaTeX code defines its own macros via `\gdef`, which enables consecutive calls to KaTeX to share state.
|
||||
- `colorIsTextColor`: `boolean`. If `true`, `\color` will work like LaTeX's `\textcolor`, and take two arguments (e.g., `\color{blue}{hello}`), which restores the old behavior of KaTeX (pre-0.8.0). If `false` (the default), `\color` will work like LaTeX's `\color`, and take one argument (e.g., `\color{blue}hello`). In both cases, `\textcolor` works as in LaTeX (e.g., `\textcolor{blue}{hello}`).
|
||||
- `maxSize`: `number`. All user-specified sizes, e.g. in `\rule{500em}{500em}`, will be capped to `maxSize` ems. If set to `Infinity` (the default), users can make elements and spaces arbitrarily large.
|
||||
- `maxExpand`: `number`. Limit the number of macro expansions to the specified number, to prevent e.g. infinite macro loops. If set to `Infinity`, the macro expander will try to fully expand as in LaTeX. (default: 1000)
|
||||
- `allowedProtocols`: `string[]`. Allowed protocols in `\href`. Use `_relative` to allow relative urls, and `*` to allow all protocols. (default: `["http", "https", "mailto", "_relative"]`)
|
||||
- `strict`: `boolean` or `string` or `function` (default: `"warn"`). If `false` or `"ignore`", allow features that make writing LaTeX convenient but are not actually supported by (Xe)LaTeX (similar to MathJax). If `true` or `"error"` (LaTeX faithfulness mode), throw an error for any such transgressions. If `"warn"` (the default), warn about such behavior via `console.warn`. Provide a custom function `handler(errorCode, errorMsg, token)` to customize behavior depending on the type of transgression (summarized by the string code `errorCode` and detailed in `errorMsg`); this function can also return `"ignore"`, `"error"`, or `"warn"` to use a built-in behavior. A list of such features and their `errorCode`s:
|
||||
- `"unknownSymbol"`: Use of unknown Unicode symbol, which will likely also
|
||||
lead to warnings about missing character metrics, and layouts may be
|
||||
incorrect (especially in terms of vertical heights).
|
||||
- `"unicodeTextInMathMode"`: Use of Unicode text characters in math mode.
|
||||
- `"mathVsTextUnits"`: Mismatch of math vs. text commands and units/mode.
|
||||
A second category of `errorCode`s never throw errors, but their strictness
|
||||
affects the behavior of KaTeX:
|
||||
- `"newLineInDisplayMode"`: Use of `\\` or `\newline` in display mode
|
||||
(outside an array/tabular environment). In strict mode, no line break
|
||||
results, as in LaTeX.
|
||||
|
||||
For example:
|
||||
|
||||
```js
|
||||
katex.render("c = \\pm\\sqrt{a^2 + b^2}\\in\\RR", element, {
|
||||
displayMode: true,
|
||||
macros: {
|
||||
"\\RR": "\\mathbb{R}"
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
#### 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.
|
||||
|
||||
#### Font size and lengths
|
||||
|
||||
By default, KaTeX math is rendered in a 1.21× larger font than the surrounding
|
||||
context, which makes super- and subscripts easier to read. You can control
|
||||
this using CSS, for example:
|
||||
|
||||
```css
|
||||
.katex { font-size: 1.1em; }
|
||||
```
|
||||
|
||||
KaTeX supports all TeX units, including absolute units like `cm` and `in`.
|
||||
Absolute units are currently scaled relative to the default TeX font size of
|
||||
10pt, so that `\kern1cm` produces the same results as `\kern2.845275em`.
|
||||
As a result, relative and absolute units are both uniformly scaled relative
|
||||
to LaTeX with a 10pt font; for example, the rectangle `\rule{1cm}{1em}` has
|
||||
the same aspect ratio in KaTeX as in LaTeX. However, because most browsers
|
||||
default to a larger font size, this typically means that a 1cm kern in KaTeX
|
||||
will appear larger than 1cm in browser units.
|
||||
|
||||
### Common Issues
|
||||
- Many Markdown preprocessors, such as the one that Jekyll and GitHub Pages use,
|
||||
have a "smart quotes" feature. This changes `'` to `’` which is an issue for
|
||||
math containing primes, e.g. `f'`. This can be worked around by defining a
|
||||
single character macro which changes them back, e.g. `{"’", "'"}`.
|
||||
- KaTeX follows LaTeX's rendering of `aligned` and `matrix` environments unlike
|
||||
MathJax. When displaying fractions one above another in these vertical
|
||||
layouts there may not be enough space between rows for people who are used to
|
||||
MathJax's rendering. The distance between rows can be adjusted by using
|
||||
`\\[0.1em]` instead of the standard line separator distance.
|
||||
- KaTeX does not support the `align` environment because LaTeX doesn't support
|
||||
`align` in math mode. The `aligned` environment offers the same functionality
|
||||
but in math mode, so use that instead or define a macro that maps `align` to
|
||||
`aligned`.
|
||||
- MathJax defines `\color` to be like `\textcolor` by default; set KaTeX's
|
||||
`colorIsTextColor` option to `true` for this behavior. KaTeX's default
|
||||
behavior matches MathJax with its `color.js` extension enabled.
|
||||
|
||||
## Libraries
|
||||
|
||||
### Angular2+
|
||||
- [ng-katex](https://github.com/garciparedes/ng-katex) Angular module to write beautiful math expressions with TeX syntax boosted by KaTeX library
|
||||
|
||||
### React
|
||||
- [react-latex](https://github.com/zzish/react-latex) React component to render latex strings, based on KaTeX
|
||||
- [react-katex](https://github.com/talyssonoc/react-katex) React components that use KaTeX to typeset math expressions
|
||||
|
||||
### Ruby
|
||||
|
||||
- [katex-ruby](https://github.com/glebm/katex-ruby) Provides server-side rendering and integration with popular Ruby web frameworks (Rails, Hanami, and anything that uses Sprockets).
|
||||
|
||||
### AsciiMath
|
||||
|
||||
If you want to render math written in [AsciiMath](http://asciimath.org/),
|
||||
you'll need to first convert AsciiMath into LaTeX input, then call KaTeX.
|
||||
|
||||
- [asciimath2tex](https://github.com/christianp/asciimath2tex)
|
||||
converts AsciiMath to TeX, with KaTeX in mind
|
||||
Learn more about using KaTeX [on the website](https://khan.github.io/KaTeX)!
|
||||
|
||||
## Contributing
|
||||
|
||||
|
28
docs/api.md
Normal file
28
docs/api.md
Normal file
@@ -0,0 +1,28 @@
|
||||
---
|
||||
id: api
|
||||
title: API
|
||||
---
|
||||
## 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);
|
||||
```
|
||||
|
||||
To avoid escaping the backslash (double backslash), you can use
|
||||
[`String.raw`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw)
|
||||
(but beware that `${`, `\u` and `\x` may still need escaping):
|
||||
```js
|
||||
katex.render(String.raw`c = \pm\sqrt{a^2 + b^2}`, element);
|
||||
```
|
||||
|
||||
If KaTeX can't parse the expression, it throws a `ParseError`. See [handling errors](error.md)
|
||||
for configuring how to handle errors.
|
||||
|
||||
## 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>'
|
||||
```
|
94
docs/autorender.md
Normal file
94
docs/autorender.md
Normal file
@@ -0,0 +1,94 @@
|
||||
---
|
||||
id: autorender
|
||||
title: Auto-render Extension
|
||||
---
|
||||
This is an extension to automatically render all of the math inside of text. It
|
||||
searches all of the text nodes in a given element for the given delimiters, and
|
||||
renders the math in place.
|
||||
|
||||
## Usage
|
||||
This extension isn't part of KaTeX proper, so the script needs to be included
|
||||
(via a `<script>` tag) in the page along with KaTeX itself. For example,
|
||||
using a CDN:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.css" integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.js" integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/contrib/auto-render.min.js" integrity="sha384-aGfk5kvhIq5x1x5YdvCp4upKZYnA8ckafviDpmWEKp4afOZEqOli7gqSnh8I6enH" crossorigin="anonymous"></script>
|
||||
```
|
||||
|
||||
Then, call the exposed `renderMathInElement` function in a script tag
|
||||
before the close body tag:
|
||||
|
||||
```html
|
||||
<body>
|
||||
...
|
||||
<script>
|
||||
renderMathInElement(document.body);
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
If you prefer to have all your setup inside the html `<head>`,
|
||||
you can use the following script there
|
||||
(instead of the one above at the end of the `<body>`):
|
||||
|
||||
```html
|
||||
<head>
|
||||
...
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
renderMathInElement(document.body);
|
||||
});
|
||||
</script>
|
||||
...
|
||||
</head>
|
||||
```
|
||||
|
||||
## API
|
||||
This extension exposes a single function, `window.renderMathInElement`, with
|
||||
the following API:
|
||||
|
||||
```js
|
||||
function renderMathInElement(elem, options)
|
||||
```
|
||||
|
||||
`elem` is an HTML DOM element. The function will recursively search for text
|
||||
nodes inside this element and render the math in them.
|
||||
|
||||
`options` is an optional object argument that can have the same keys as [the
|
||||
object passed to `katex.render`](https://github.com/Khan/KaTeX/#rendering-options),
|
||||
in addition to two auto-render-specific keys:
|
||||
|
||||
- `delimiters`: This is a list of delimiters to look for math. Each delimiter
|
||||
has three properties:
|
||||
|
||||
- `left`: A string which starts the math expression (i.e. the left delimiter).
|
||||
- `right`: A string which ends the math expression (i.e. the right delimiter).
|
||||
- `display`: A boolean of whether the math in the expression should be
|
||||
rendered in display mode or not.
|
||||
|
||||
The default value is:
|
||||
|
||||
```js
|
||||
[
|
||||
{left: "$$", right: "$$", display: true},
|
||||
{left: "\\(", right: "\\)", display: false},
|
||||
{left: "\\[", right: "\\]", display: true}
|
||||
]
|
||||
```
|
||||
|
||||
- `ignoredTags`: This is a list of DOM node types to ignore when recursing
|
||||
through. The default value is
|
||||
`["script", "noscript", "style", "textarea", "pre", "code"]`.
|
||||
|
||||
- `errorCallback`: A callback method returning a message and an error stack
|
||||
in case of an critical error during rendering. The default uses `console.error`.
|
||||
|
||||
The `displayMode` property of the options object is ignored, and is
|
||||
instead taken from the `display` key of the corresponding entry in the
|
||||
`delimiters` key.
|
||||
|
||||
The same `options.macros` object (which defaults to an empty object `{}`)
|
||||
is passed into several calls to `katex.render`, so that consecutive equations
|
||||
can build up shared macros by `\gdef`.
|
31
docs/browser.md
Normal file
31
docs/browser.md
Normal file
@@ -0,0 +1,31 @@
|
||||
---
|
||||
id: browser
|
||||
title: Browser
|
||||
---
|
||||
> KaTeX supports all major browsers, including Chrome, Safari, Firefox, Opera, Edge, and IE 9 - IE 11.
|
||||
|
||||
## CDN(Content Delivery Network)
|
||||
Use CDN to deliver KaTeX to your project:
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.js" integrity="sha256-9uW7yW4EwdUyWU2PHu+Ccek7+xbQpDTDS5OBP0qDrTM=" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.css" integrity="sha256-T4bfkilI7rlQXG1R8kqn+FGhe56FhZmqmp9x75Lw4s8=" crossorigin="anonymous">
|
||||
```
|
||||
|
||||
KaTeX also provides minified versions:
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.js" integrity="sha256-mxaM9VWtRj1wBtn50/EDUUe4m3t39ExE+xEPyrxVB8I=" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.css" integrity="sha256-sI/DdD47R/Sa54XZDNFjRWlS+Dv8MC5xfkqQLRh0Jes=" crossorigin="anonymous">
|
||||
```
|
||||
|
||||
## Download & Host Things Yourself
|
||||
Download the latest version from [here](https://github.com/Khan/KaTeX/releases),
|
||||
copy `katex.js`, `katex.css`(or `katex.min.js` and `katex.min.css` to use minified
|
||||
versions) and `fonts` from `/katex`, and include like above.
|
||||
|
||||
## Bundler
|
||||
Use [`Node.js` package managers](node.md) to install KaTeX and require it in your
|
||||
project. Then bundle using bundlers like [webpack](https://webpack.js.org/) or
|
||||
[rollup.js](https://rollupjs.org/). Note that you have to bundle the stylesheet(`katex.css`)
|
||||
or include it manually.
|
58
docs/cli.md
Normal file
58
docs/cli.md
Normal file
@@ -0,0 +1,58 @@
|
||||
---
|
||||
id: cli
|
||||
title: CLI
|
||||
---
|
||||
|
||||
KaTeX installed [using Node.js package managers](node.md) comes with a built-in CLI
|
||||
which can be used to render TeX to HTML from the command line. By default, CLI will
|
||||
take the input from `stdin`.
|
||||
|
||||
```bash
|
||||
npx katex
|
||||
```
|
||||
|
||||
> Above uses the `npx` command to run the locally installed executable.
|
||||
You can execute with the relative path: `./node_modules/.bin/katex`
|
||||
|
||||
> To use CLI from local clone, you need to build the project first by
|
||||
running `npm run dist`
|
||||
|
||||
# Usage
|
||||
|
||||
## `-d, --display-mode`
|
||||
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. [false]
|
||||
|
||||
## `-t, --no-throw-on-error`
|
||||
If true, KaTeX will throw a ParseError when it encounters an unsupported command.
|
||||
If false, KaTeX will render the unsupported command as text in the color given by
|
||||
errorColor. [true]
|
||||
|
||||
## `-c color, --error-color color`
|
||||
A color string given in the format 'rgb' or 'rrggbb'. This option determines the
|
||||
color which unsupported commands are rendered in. [#cc0000]
|
||||
|
||||
## `-b, --color-is-text-color`
|
||||
Makes \color behave like LaTeX's 2-argument \textcolor, instead of LaTeX's
|
||||
one-argument \color mode change. [false]
|
||||
|
||||
## `-u, --unicode-text-in-math-mode`
|
||||
Add support for unicode text characters in math mode. [false]
|
||||
|
||||
## `-s size, --max-size size`
|
||||
If non-zero, all user-specified sizes, e.g. in \rule{500em}{500em}, will be capped
|
||||
to maxSize ems. Otherwise, elements and spaces can be arbitrarily large [0]
|
||||
|
||||
## `-m macro:expansion, --macro macro:expansion`
|
||||
A custom macro. Each macro is a property with a name like \name which maps to a
|
||||
string that describes the expansion of the macro. []
|
||||
|
||||
## `-f path, --macro-file path`
|
||||
Read macro definitions from the given file.
|
||||
|
||||
## `-i path, --input path`
|
||||
Read LaTeX input from the given file.
|
||||
|
||||
## `-o path, --output path`
|
||||
Write html output to the given file.
|
17
docs/error.md
Normal file
17
docs/error.md
Normal file
@@ -0,0 +1,17 @@
|
||||
---
|
||||
id: error
|
||||
title: Handling Errors
|
||||
---
|
||||
If KaTeX encounters an error (invalid or unsupported LaTeX) and `throwOnError`
|
||||
hasn't been set to `false`, then it will throw an exception of type
|
||||
`ParseError`. The message in this error includes some of the LaTeX
|
||||
source code, so needs to be escaped if you want to render it to HTML.
|
||||
|
||||
In particular, you should convert `&`, `<`, `>` characters to
|
||||
`&`, `<`, `>` (e.g., using `_.escape`)
|
||||
before including either LaTeX source code or exception messages in your
|
||||
HTML/DOM. (Failure to escape in this way makes a `<script>` injection
|
||||
attack possible if your LaTeX source is untrusted.)
|
||||
|
||||
Alternatively, you can set `throwOnError` to `false` to use built-in behavior
|
||||
of rendering the LaTeX source code with hover text stating the error.
|
48
docs/font.md
Normal file
48
docs/font.md
Normal file
@@ -0,0 +1,48 @@
|
||||
---
|
||||
id: font
|
||||
title: Font
|
||||
---
|
||||
By changing the variables in the `fonts.less` file at the [katex-fonts submodule](https://github.com/KaTeX/katex-fonts/),
|
||||
several properties of the way fonts are used can be changed.
|
||||
|
||||
## Font size and lengths
|
||||
By default, KaTeX math is rendered in a 1.21× larger font than the surrounding
|
||||
context, which makes super- and subscripts easier to read. You can control
|
||||
this using CSS, for example:
|
||||
|
||||
```css
|
||||
.katex { font-size: 1.1em; }
|
||||
```
|
||||
|
||||
KaTeX supports all TeX units, including absolute units like `cm` and `in`.
|
||||
Absolute units are currently scaled relative to the default TeX font size of
|
||||
10pt, so that `\kern1cm` produces the same results as `\kern2.845275em`.
|
||||
As a result, relative and absolute units are both uniformly scaled relative
|
||||
to LaTeX with a 10pt font; for example, the rectangle `\rule{1cm}{1em}` has
|
||||
the same aspect ratio in KaTeX as in LaTeX. However, because most browsers
|
||||
default to a larger font size, this typically means that a 1cm kern in KaTeX
|
||||
will appear larger than 1cm in browser units.
|
||||
|
||||
## Kinds of fonts used
|
||||
|
||||
The default build of KaTeX includes each of the needed fonts in three different formats: `ttf`, `woff`, and `woff2`.
|
||||
|
||||
- `ttf`s are included to support old versions of Chrome, Safari, Firefox, etc. (By old, I mean Firefox 3.5, Chrome <5, Safari <=5.1 all of which are no longer supported: see [woff](http://caniuse.com/#search=woff) vs [ttf](http://caniuse.com/#search=ttf)).
|
||||
- `woff` is the format that is most widely supported (all modern browsers support it), so it probably provides the most benefit to being included.
|
||||
- `woff2`s are included for very new versions of Chrome, because they are much smaller and faster to load.
|
||||
|
||||
Based on this information and what you want to support with your website, you might decide to include different versions of the fonts besides what comes with the standard installation.
|
||||
|
||||
For example, if you wanted to create a trimmed down version of KaTeX, you could only include the `woff` files and gain the most support with the least number of files. To do this:
|
||||
|
||||
1. Set `@use-ttf`, and `@use-woff2` to `false` at the top of [fonts.less](https://github.com/KaTeX/katex-fonts/blob/master/fonts.less).
|
||||
2. Rebuild KaTeX by running `npm run build` from the top-level directory.
|
||||
3. Include only the `build/fonts/*.woff2` files in your distribution.
|
||||
|
||||
## Location of font files
|
||||
|
||||
The default build of KaTeX expects the KaTeX fonts to be located in a directory called `fonts` which is a sibling of the `katex.min.css` stylesheet. This can be changed as such:
|
||||
|
||||
1. At the top of the [fonts.less](https://github.com/KaTeX/katex-fonts/blob/master/fonts.less) file, set `@font-folder` to the location of your fonts. You can use relative or absolute paths, so setting it to `"/fonts"` would cause it to search for the fonts in a root `fonts` folder, while `"../fonts"` would search in a `fonts` directory one level above the `katex.min.css` file.
|
||||
2. Rebuild KaTeX by running `npm run build` from the top-level directory.
|
||||
3. Use the newly generated `build/katex.min.css` file, and place the fonts where you indicated.
|
20
docs/issues.md
Normal file
20
docs/issues.md
Normal file
@@ -0,0 +1,20 @@
|
||||
---
|
||||
id: issues
|
||||
title: Common Issues
|
||||
---
|
||||
- Many Markdown preprocessors, such as the one that Jekyll and GitHub Pages use,
|
||||
have a "smart quotes" feature. This changes `'` to `’` which is an issue for
|
||||
math containing primes, e.g. `f'`. This can be worked around by defining a
|
||||
single character macro which changes them back, e.g. `{"’", "'"}`.
|
||||
- KaTeX follows LaTeX's rendering of `aligned` and `matrix` environments unlike
|
||||
MathJax. When displaying fractions one above another in these vertical
|
||||
layouts there may not be enough space between rows for people who are used to
|
||||
MathJax's rendering. The distance between rows can be adjusted by using
|
||||
`\\[0.1em]` instead of the standard line separator distance.
|
||||
- KaTeX does not support the `align` environment because LaTeX doesn't support
|
||||
`align` in math mode. The `aligned` environment offers the same functionality
|
||||
but in math mode, so use that instead or define a macro that maps `align` to
|
||||
`aligned`.
|
||||
- MathJax defines `\color` to be like `\textcolor` by default; set KaTeX's
|
||||
`colorIsTextColor` option to `true` for this behavior. KaTeX's default
|
||||
behavior matches MathJax with its `color.js` extension enabled.
|
22
docs/libs.md
Normal file
22
docs/libs.md
Normal file
@@ -0,0 +1,22 @@
|
||||
---
|
||||
id: libs
|
||||
title: Libraries
|
||||
---
|
||||
## Angular2+
|
||||
- [ng-katex](https://github.com/garciparedes/ng-katex) Angular module to write beautiful math expressions with TeX syntax boosted by KaTeX library
|
||||
|
||||
## React
|
||||
- [react-latex](https://github.com/zzish/react-latex) React component to render latex strings, based on KaTeX
|
||||
- [react-katex](https://github.com/talyssonoc/react-katex) React components that use KaTeX to typeset math expressions
|
||||
|
||||
## Ruby
|
||||
|
||||
- [katex-ruby](https://github.com/glebm/katex-ruby) Provides server-side rendering and integration with popular Ruby web frameworks (Rails, Hanami, and anything that uses Sprockets).
|
||||
|
||||
## AsciiMath
|
||||
|
||||
If you want to render math written in [AsciiMath](http://asciimath.org/),
|
||||
you'll need to first convert AsciiMath into LaTeX input, then call KaTeX.
|
||||
|
||||
- [asciimath2tex](https://github.com/christianp/asciimath2tex)
|
||||
converts AsciiMath to TeX, with KaTeX in mind
|
23
docs/node.md
Normal file
23
docs/node.md
Normal file
@@ -0,0 +1,23 @@
|
||||
---
|
||||
id: node
|
||||
title: Node.js
|
||||
---
|
||||
## npm
|
||||
Install with `npm`:
|
||||
|
||||
```bash
|
||||
npm install katex
|
||||
# or globally
|
||||
npm install -g katex
|
||||
```
|
||||
|
||||
## Yarn
|
||||
Install with `Yarn`:
|
||||
|
||||
```bash
|
||||
yarn add katex
|
||||
# or globally
|
||||
yarn global add katex
|
||||
```
|
||||
<br>
|
||||
> You can manually download the package from [here](https://github.com/Khan/KaTeX/releases)
|
36
docs/options.md
Normal file
36
docs/options.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
id: options
|
||||
title: 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`)
|
||||
- `throwOnError`: `boolean`. If `true` (the default), KaTeX will throw a `ParseError` when it encounters an unsupported command or invalid LaTeX. If `false`, KaTeX will render unsupported commands as text, and render invalid LaTeX as its source code with hover text giving the error, in the color given by `errorColor`.
|
||||
- `errorColor`: `string`. A color string given in the format `"#XXX"` or `"#XXXXXX"`. This option determines the color that unsupported commands and invalid LaTeX are rendered in when `throwOnError` is set to `false`. (default: `#cc0000`)
|
||||
- `macros`: `object`. A collection of custom macros. Each macro is a property with a name like `\name` (written `"\\name"` in JavaScript) which maps to a string that describes the expansion of the macro. Single-character keys can also be included in which case the character will be redefined as the given macro (similar to TeX active characters). *This object will be modified* if the LaTeX code defines its own macros via `\gdef`, which enables consecutive calls to KaTeX to share state.
|
||||
- `colorIsTextColor`: `boolean`. If `true`, `\color` will work like LaTeX's `\textcolor`, and take two arguments (e.g., `\color{blue}{hello}`), which restores the old behavior of KaTeX (pre-0.8.0). If `false` (the default), `\color` will work like LaTeX's `\color`, and take one argument (e.g., `\color{blue}hello`). In both cases, `\textcolor` works as in LaTeX (e.g., `\textcolor{blue}{hello}`).
|
||||
- `maxSize`: `number`. All user-specified sizes, e.g. in `\rule{500em}{500em}`, will be capped to `maxSize` ems. If set to `Infinity` (the default), users can make elements and spaces arbitrarily large.
|
||||
- `maxExpand`: `number`. Limit the number of macro expansions to the specified number, to prevent e.g. infinite macro loops. If set to `Infinity`, the macro expander will try to fully expand as in LaTeX. (default: 1000)
|
||||
- `allowedProtocols`: `string[]`. Allowed protocols in `\href`. Use `_relative` to allow relative urls, and `*` to allow all protocols. (default: `["http", "https", "mailto", "_relative"]`)
|
||||
- `strict`: `boolean` or `string` or `function` (default: `"warn"`). If `false` or `"ignore`", allow features that make writing LaTeX convenient but are not actually supported by (Xe)LaTeX (similar to MathJax). If `true` or `"error"` (LaTeX faithfulness mode), throw an error for any such transgressions. If `"warn"` (the default), warn about such behavior via `console.warn`. Provide a custom function `handler(errorCode, errorMsg, token)` to customize behavior depending on the type of transgression (summarized by the string code `errorCode` and detailed in `errorMsg`); this function can also return `"ignore"`, `"error"`, or `"warn"` to use a built-in behavior. A list of such features and their `errorCode`s:
|
||||
- `"unknownSymbol"`: Use of unknown Unicode symbol, which will likely also
|
||||
lead to warnings about missing character metrics, and layouts may be
|
||||
incorrect (especially in terms of vertical heights).
|
||||
- `"unicodeTextInMathMode"`: Use of Unicode text characters in math mode.
|
||||
- `"mathVsTextUnits"`: Mismatch of math vs. text commands and units/mode.
|
||||
A second category of `errorCode`s never throw errors, but their strictness
|
||||
affects the behavior of KaTeX:
|
||||
- `"newLineInDisplayMode"`: Use of `\\` or `\newline` in display mode
|
||||
(outside an array/tabular environment). In strict mode, no line break
|
||||
results, as in LaTeX.
|
||||
|
||||
For example:
|
||||
|
||||
```js
|
||||
katex.render("c = \\pm\\sqrt{a^2 + b^2}\\in\\RR", element, {
|
||||
displayMode: true,
|
||||
macros: {
|
||||
"\\RR": "\\mathbb{R}"
|
||||
}
|
||||
});
|
||||
```
|
15
docs/security.md
Normal file
15
docs/security.md
Normal file
@@ -0,0 +1,15 @@
|
||||
---
|
||||
id: security
|
||||
title: Security
|
||||
---
|
||||
Any HTML generated by KaTeX *should* be safe from `<script>` or other code
|
||||
injection attacks.
|
||||
(See `maxSize` below for preventing large width/height visual affronts,
|
||||
see `maxExpand` below for preventing infinite macro loop attacks, and
|
||||
see `allowedProtocols` below for preventing certain protocols in `\href`)
|
||||
|
||||
Of course, it is always a good idea to sanitize the HTML, though you will need
|
||||
a rather generous whitelist (including some of SVG and MathML) to support
|
||||
all of KaTeX.
|
||||
|
||||
> If you discovered a security issue, please let us know via https://hackerone.com/khanacademy
|
567
docs/supported.md
Normal file
567
docs/supported.md
Normal file
@@ -0,0 +1,567 @@
|
||||
---
|
||||
id: supported
|
||||
title: Supported Functions
|
||||
---
|
||||
This is a list of TeX functions supported by KaTeX. It is sorted into logical groups.
|
||||
|
||||
For a list of things that are not (yet) in KaTeX, there is a [wiki page](https://github.com/Khan/KaTeX/wiki/Things-that-KaTeX-does-not-%28yet%29-support).
|
||||
|
||||
## Accents
|
||||
|
||||
||||
|
||||
|:----------------------------|:----------------------------------------------------|:-----
|
||||
|$a'$ `a'` |$\tilde{a}$ `\tilde{a}`|$\mathring{g}$ `\mathring{g}`
|
||||
|$a''$ `a''`|$\widetilde{ac}$ `\widetilde{ac}` |$\overgroup{AB}$ `\overgroup{AB}`
|
||||
|$a^{\prime}$ `a^{\prime}` |$\utilde{AB}$ `\utilde{AB}` |$\undergroup{AB}$ `\undergroup{AB}`
|
||||
|$\acute{a}$ `\acute{a}`|$\vec{F}$ `\vec{F}` |$\Overrightarrow{AB}$ `\Overrightarrow{AB}`
|
||||
|$\bar{y}$ `\bar{y}` |$\overleftarrow{AB}$ `\overleftarrow{AB}`|$\overrightarrow{AB}$ `\overrightarrow{AB}`
|
||||
|$\breve{a}$ `\breve{a}`|$\underleftarrow{AB}$ `\underleftarrow{AB}` |$\underrightarrow{AB}$ `\underrightarrow{AB}`
|
||||
|$\check{a}$ `\check{a}`|$\overleftharpoon{ac}$ `\overleftharpoon{ac}` |$\overrightharpoon{ac}$ `\overrightharpoon{ac}`
|
||||
|$\dot{a}$ `\dot{a}` |$\overleftrightarrow{AB}$ `\overleftrightarrow{AB}` |$\overbrace{AB}$ `\overbrace{AB}`
|
||||
|$\ddot{a}$ `\ddot{a}` |$\underleftrightarrow{AB}$ `\underleftrightarrow{AB}`|$\underbrace{AB}$ `\underbrace{AB}`
|
||||
|$\grave{a}$ `\grave{a}`|$\overline{AB}$ `\overline{AB}` |$\overlinesegment{AB}$ `\overlinesegment{AB}`
|
||||
|$\hat{\theta}$ `\hat{\theta}`|$\underline{AB}$ `\underline{AB}` |$\underlinesegment{AB}$ `\underlinesegment{AB}`
|
||||
|$\widehat{ac}$ `\widehat{ac}`|$\widecheck{ac}$ `\widecheck{ac}` |
|
||||
|
||||
***Accent functions inside \\text{…}***
|
||||
|
||||
|||||
|
||||
|:---------------------|:---------------------|:---------------------|:-----
|
||||
|$\text{\'{a}}$ `\'{a}`|$\text{\~{a}}$ `\~{a}`|$\text{\.{a}}$ `\.{a}`|$\text{\H{a}}$ `\H{a}`
|
||||
|$\text{\`{a}}$ `\`{a}`|$\text{\={a}}$ `\={a}`|$\text{\"{a}}$ `\"{a}`|$\text{\v{a}}$ `\v{a}`
|
||||
|$\text{\^{a}}$ `\^{a}`|$\text{\u{a}}$ `\u{a}`|$\text{\r{a}}$ `\r{a}`|
|
||||
|
||||
See also [letters](#letters)
|
||||
|
||||
## Delimiters
|
||||
|
||||
||||||
|
||||
|:-----------------------------------|:---------------------------------------|:----------|:-------------------------------------------------------|:-----
|
||||
|$( )$ `( )` |$\lt~\gt$ `\lt \gt` |$⌈~⌉$ `⌈ ⌉`|$\lceil~\rceil$ `\lceil`<br>`\rceil` |$\uparrow$ `\uparrow`
|
||||
|$[ ]$ `[ ]` |$\lbrack~\rbrack$ `\lbrack`<br>$~~~~$`\rbrack`|$⌊~⌋$ `⌊ ⌋`|$\lfloor~\rfloor$ `\lfloor`<br>$~~~~$`\rfloor` |$\downarrow$ `\downarrow`
|
||||
|$\{ \}$ `\{ \}`|$\lbrace \rbrace$ `\lbrace`<br>$~~~~$`\rbrace`|$⎰⎱$ `⎰⎱` |$\lmoustache \rmoustache$ `\lmoustache`<br>$~~~~$`\rmoustache`|$\updownarrow$ `\updownarrow`
|
||||
|$⟨~⟩$ `⟨ ⟩` |$\langle~\rangle$ `\langle`<br>$~~~~$`\rangle`|$⟮~⟯$ `⟮ ⟯`|$\lgroup~\rgroup$ `\lgroup`<br>`\rgroup` |$\Uparrow$ `\Uparrow`
|
||||
|$\vert$ $\colorbox{#f3f3f4}{\textbar}$ |$\vert$ `\vert` |$┌ ┐$ `┌ ┐`|$\ulcorner \urcorner$ `\ulcorner`<br>$~~~~$`\urcorner` |$\Downarrow$ `\Downarrow`
|
||||
|$\Vert$ $\colorbox{#f3f3f4}{\textbar\textbar}$ |$\Vert$ `\Vert` |$└ ┘$ `└ ┘`|$\llcorner \lrcorner$ `\llcorner`<br>$~~~~$`\lrcorner` |$\Updownarrow$ `\Updownarrow`
|
||||
|$\lvert~\rvert$ `\lvert`<br>$~~~~$`\rvert`|$\lVert~\rVert$ `\lVert`<br>$~~~~$`\rVert` |`\left.`| `\right.` |$\backslash$ `\backslash`
|
||||
|
||||
**Delimiter Sizing**
|
||||
|
||||
$\left(\LARGE{AB}\right)$ `\left(\LARGE{AB}\right)`
|
||||
|
||||
$( \big( \Big( \bigg( \Bigg($ `( \big( \Big( \bigg( \Bigg(`
|
||||
|
||||
|||||
|
||||
|:--------|:------|:--------|:------|
|
||||
|`\left` |`\big` |`\bigl` |`\bigr`
|
||||
|`\middle`|`\Big` |`\Bigl` |`\Bigr`
|
||||
|`\right` |`\bigg`|`\biggl` |`\biggr`
|
||||
| |`\Bigg`|`\Biggl` |`\Biggr`
|
||||
|
||||
|
||||
## Environments
|
||||
|
||||
|||||
|
||||
|:---------------------|:---------------------|:---------------------|:-----
|
||||
|$\begin{matrix} a & b \\ c & d \end{matrix}$ | `\begin{matrix}`<br> `a & b \\`<br> `c & d`<br>`\end{matrix}` |$\begin{array}{cc}a & b\\c & d\end{array}$ | `\begin{array}{cc}`<br> `a & b \\`<br> `c & d`<br>`\end{array}`
|
||||
|$\begin{pmatrix} a & b \\ c & d \end{pmatrix}$ |`\begin{pmatrix}`<br> `a & b \\`<br> `c & d`<br>`\end{pmatrix}` |$\begin{bmatrix} a & b \\ c & d \end{bmatrix}$ | `\begin{bmatrix}`<br> `a & b \\`<br> `c & d`<br>`\end{bmatrix}`
|
||||
|$\begin{vmatrix} a & b \\ c & d \end{vmatrix}$ |`\begin{vmatrix}`<br> `a & b \\`<br> `c & d`<br>`\end{vmatrix}` |$\begin{Vmatrix} a & b \\ c & d \end{Vmatrix}$ |`\begin{Vmatrix}`<br> `a & b \\`<br> `c & d`<br>`\end{Vmatrix}`
|
||||
|$\begin{Bmatrix} a & b \\ c & d \end{Bmatrix}$ |`\begin{Bmatrix}`<br> `a & b \\`<br> `c & d`<br>`\end{Bmatrix}`|$\def\arraystretch{1.5}\begin{array}{c:c:c} a & b & c \\ \hline d & e & f \\ \hdashline g & h & i \end{array}$|`\def\arraystretch{1.5}`<br> `\begin{array}{c:c:c}`<br> `a & b & c \\ \hline`<br> `d & e & f \\`<br> `\hdashline`<br> `g & h & i`<br>`\end{array}`
|
||||
|$\begin{aligned} a&=b+c \\ d+e&=f \end{aligned}$ |`\begin{aligned}`<br> `a&=b+c \\`<br> `d+e&=f`<br>`\end{aligned}`|$\begin{alignedat}{2}10&x+&3&y=2\\3&x+&13&y=4\end{alignedat}$ |`\begin{alignedat}{2}`<br> `10&x+ &3&y = 2 \\`<br> ` 3&x+&13&y = 4`<br>`\end{alignedat}`
|
||||
|$\begin{gathered} a=b \\ e=b+c \end{gathered}$ |`\begin{gathered}`<br> `a=b \\ `<br> `e=b+c`<br>`\end{gathered}`|$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$ |`x = \begin{cases}`<br> `a &\text{if } b \\`<br> `c &\text{if } d`<br>`\end{cases}`
|
||||
|
||||
KaTeX also supports `darray` and `dcases`.
|
||||
|
||||
Acceptable line separators include: `\\`, `\cr`, `\\[distance]`, and `\cr[distance]`. *Distance* can be written with any of the [KaTeX units](#units).
|
||||
|
||||
The `{array}` environment supports `|` and `:` vertical separators.
|
||||
|
||||
The `{array}` environment does not yet support `\cline` or `\multicolumn`.
|
||||
|
||||
## HTML
|
||||
|
||||
$\href{https://khan.github.io/KaTeX/}{KaTeX}$ `\href{https://khan.github.io/KaTeX/}{KaTeX}`
|
||||
|
||||
## Letters and Unicode
|
||||
|
||||
**Greek Letters**
|
||||
|
||||
Direct Input: $Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω$<br>
|
||||
$α β γ δ ϵ ζ η θ ι κ λ μ ν ξ o π ρ σ τ υ ϕ χ ψ ω ε ϑ ϖ ϱ ς φ$
|
||||
|
||||
|||||
|
||||
|---------------|-------------|-------------|---------------|
|
||||
| $\Gamma$ `\Gamma`| $\Delta$ `\Delta` | $\Theta$ `\Theta` | $\Lambda$ `\Lambda` |
|
||||
| $\Xi$ `\Xi`| $\Pi$ `\Pi` | $\Sigma$ `\Sigma` | $\Upsilon$ `\Upsilon` |
|
||||
| $\Phi$ `\Phi` | $\Psi$ `\Psi`| $\Omega$ `\Omega` ||
|
||||
| $\varGamma$ `\varGamma`| $\varDelta$ `\varDelta` | $\varTheta$ `\varTheta` | $\varLambda$ `\varLambda` |
|
||||
| $\varXi$ `\varXi`| $\varPi$ `\varPi` | $\varSigma$ `\varSigma` | $\varUpsilon$ `\varUpsilon` |
|
||||
| $\varPhi$ `\varPhi` | $\varPsi$ `\varPsi`| $\varOmega$ `\varOmega` ||
|
||||
| $\alpha$ `\alpha`| $\beta$ `\beta` | $\gamma$ `\gamma` | $\delta$ `\delta`|
|
||||
| $\epsilon$ `\epsilon` | $\zeta$ `\zeta` | $\eta$ `\eta`| $\theta$ `\theta`|
|
||||
| $\iota$ `\iota` | $\kappa$ `\kappa` | $\lambda$ `\lambda`| $\mu$ `\mu`|
|
||||
| $\nu$ `\nu`| $\xi$ `\xi` | $\omicron$ `\omicron` | $\pi$ `\pi`|
|
||||
| $\rho$ `\rho` | $\sigma$ `\sigma` | $\tau$ `\tau`| $\upsilon$ `\upsilon` |
|
||||
| $\phi$ `\phi` | $\chi$ `\chi`| $\psi$ `\psi`| $\omega$ `\omega`|
|
||||
| $\varepsilon$ `\varepsilon` | $\varkappa$ `\varkappa` | $\vartheta$ `\vartheta` | $\varpi$ `\varpi`|
|
||||
| $\varrho$ `\varrho` | $\varsigma$ `\varsigma` | $\varphi$ `\varphi`| $\digamma $ `\digamma `|
|
||||
|
||||
**Other Letters**
|
||||
|
||||
||||||
|
||||
|------------|-----------|----------|---------|----------|
|
||||
| $\imath$ `imath` | $\eth$ `\eth` | $\Im$ `\Im`| $\text{\aa}$ `\text{\aa}`| $\text{\o}$ `\text{\o}` |
|
||||
| $\jmath$ `\jmath`| $\Finv$ `\Finv`| $\Re$ `\Re`| $\text{\AA}$ `\text{\AA}`| $\text{\O}$ `\text{\O}` |
|
||||
| $\aleph$ `\aleph`| $\Game$ `\Game`| $\wp$ `\wp`| $\text{\ae}$ `\text{\ae}`| $\text{\ss}$ `\text{\ss}` |
|
||||
| $\beth$ `\beth` | $\ell$ `\ell` | $\partial$ `\partial` | $\text{\AE}$ `\text{\AE}`| $\text{\i}$ `\text{\i}` |
|
||||
| $\gimel$ `\gimel`| $\hbar$ `\hbar`| $\nabla$ `\nabla`| $\text{\oe}$ `\text{\oe}`| $\text{\j}$ `\text{\j}` |
|
||||
| $\daleth$ `\daleth` | $\hslash$ `\hslash` | $\Bbbk$ `\Bbbk` | $\text{\OE}$ `\text{\OE}`| |
|
||||
|
||||
Direct Input: $∂ ∇ ℑ Ⅎ ℵ ℶ ℷ ℸ ⅁ ℏ$ ð <br>
|
||||
ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖÙÚÛÜÝÞß<br>àáâãäåçèéêëìíîïðñòóôöùúûüýþÿ
|
||||
|
||||
**Unicode Mathematical Alphanumeric Symbols**
|
||||
|
||||
| Item| Range | Item| Range |
|
||||
|--------------|---------------|---------------------|---------------|
|
||||
| Bold| A-Z a-z 0-9 | Double-struck| A-Z k |
|
||||
| Italic | A-Z a-z| Sans serif| A-Z a-z 0-9 |
|
||||
| Bold Italic | A-Z a-z| Sans serif bold | A-Z a-z 0-9 |
|
||||
| Script | A-Z | Sans serif italic | A-Z a-z|
|
||||
| Fractur| A-Z a-z| Monospace | A-Z a-z 0-9 |
|
||||
|
||||
**Unicode**
|
||||
|
||||
The letters listed above will render in any KaTeX rendering mode.
|
||||
|
||||
If the KaTeX rendering mode is set to `strict: false` or `strict:"warn"` (default), then KaTeX will accept all Unicode letters. The letters not listed above will be rendered from system fonts, not KaTeX-supplied fonts, so their typography may clash. They may also cause small vertical alignment issues. KaTeX has detailed metrics for glyphs in Latin, Greek, and Cyrillic, but other glyphs are treated as if they are each as tall as the letter M.
|
||||
|
||||
For Persian composite characters, a user-supplied [plug-in](https://github.com/HosseinAgha/persian-katex-plugin) is under development.
|
||||
|
||||
## Layout
|
||||
|
||||
### Annotation
|
||||
|
||||
|||
|
||||
|:------------------------------|:-----
|
||||
|$\cancel{5}$ `\cancel{5}`|$\overbrace{a+b+c}^{\text{note}}$ `\overbrace{a+b+c}^{\text{note}}`
|
||||
|$\bcancel{5}$ `\bcancel{5}` |$\underbrace{a+b+c}_{\text{note}}$ `\underbrace{a+b+c}_{\text{note}}`
|
||||
|$\xcancel{ABC}$ `\xcancel{ABC}`|$\not =$ `\not =`
|
||||
|$\sout{abc}$ `\sout{abc}`|$\boxed{\pi=\frac c d}$ `\boxed{\pi=\frac c d}`
|
||||
|
||||
|
||||
`\tag{hi} x+y^{2x}`
|
||||
$$\tag{hi} x+y^{2x}$$
|
||||
|
||||
`\tag*{hi} x+y^{2x}`
|
||||
$$\tag*{hi} x+y^{2x}$$
|
||||
|
||||
### Line Breaks and Vertical Layout
|
||||
|
||||
KaTeX 0.10.0+ will insert automatic line breaks in inline math after relations or binary operators such as “=” or “+”. These can be suppressed by placing math inside a pair of braces, as in `{F=ma}`.
|
||||
|
||||
Hard line breaks are `\\` and `\newline`.
|
||||
|
||||
In display math, KaTeX does not insert automatic line breaks. It ignores display math hard line breaks when rendering option `strict: true`.
|
||||
|
||||
**Vertical Layout**
|
||||
|
||||
||||
|
||||
|:--------------|:----------------------------------------|:-----
|
||||
|$x_n$ `x_n` |$\stackrel{!}{=}$ `\stackrel{!}{=}` |$a \atop b$ `a \atop b`
|
||||
|$e^x$ `e^x` |$\overset{!}{=}$ `\overset{!}{=}` |$a\raisebox{0.25em}{b}c$ `a\raisebox{0.25em}{b}c`
|
||||
|$_u^o $ `_u^o `|$\underset{!}{=}$ `\underset{!}{=}`| $~$
|
||||
|
||||
The second argument of `\raisebox` can contain math if it is nested within `$…$` delimiters, as in `\raisebox{0.25em}{$\frac a b$}`
|
||||
|
||||
### Overlap and Spacing
|
||||
|
||||
|||
|
||||
|:-------|:-------|
|
||||
|${=}\mathllap{/\,}$ `{=}\mathllap{/\,}` | $\left(x^{\smash{2}}\right)$ `\left(x^{\smash{2}}\right)`
|
||||
|$\mathrlap{\,/}{=}$ `\mathrlap{\,/}{=}` | $\sqrt{\smash[b]{y}}$ `\sqrt{\smash[b]{y}} `
|
||||
|
||||
$\displaystyle\sum_{\mathclap{1\le i\le j\le n}} x_{ij}$ `\sum_{\mathclap{1\le i\le j\le n}} x_{ij}`
|
||||
|
||||
KaTeX also supports `\llap`, `\rlap`, and `\clap`, but they will take only text, not math, as arguments.
|
||||
|
||||
**Spacing**
|
||||
|
||||
| Function | Produces | Function | Produces|
|
||||
|:----------------|:-------------------|:----------------------|:--------------------------------------|
|
||||
| `\!`| – ³∕₁₈ em space | `\kern{distance}` | space, width = *distance* |
|
||||
| `\,`| ³∕₁₈ em space| `\mkern{distance}` | space, width = *distance* |
|
||||
| `\thinspace` | ³∕₁₈ em space| `\skip{distance}` | space, width = *distance* |
|
||||
| `\:`| ⁴∕₁₈ em space| `\mskip{distance}` | space, width = *distance* |
|
||||
| `\medspace` | ⁴∕₁₈ em space| `\hspace{distance}`| space, width = *distance* |
|
||||
| `\;`| ⁵∕₁₈ em space| `\hspace\*{distance}` | space, width = *distance* |
|
||||
| `\thickspace`| ⁵∕₁₈ em space| `\phantom{content}`| space the width and height of content |
|
||||
| `\enspace`| ½ em space| `\hphantom{content}` | space the width of content|
|
||||
| `\quad`| 1 em space| `\vphantom{content}` | a strut the height of content|
|
||||
| `\qquad` | 2 em space| ||
|
||||
| `~`| non-breaking space | ||
|
||||
| `\<space>` | space | ||
|
||||
| `\nobreakspace` | non-breaking space | ||
|
||||
| `\space` | space | ||
|
||||
|
||||
**Notes:**
|
||||
|
||||
`distance` will accept any of the [KaTeX units](#units).
|
||||
|
||||
`\kern`, `\mkern`, and `\hspace` accept unbraced distances, as in: `\kern1em`.
|
||||
|
||||
`\mkern` and `\mskip` will not work in text mode and both will write a console warning for any unit except `mu`.
|
||||
|
||||
## Logic and Set Theory
|
||||
|
||||
|||||
|
||||
|:--------------------|:--------------------------|:----------------------------------|:-----
|
||||
|$\forall$ `\forall` |$\complement$ `\complement`|$\therefore$ `\therefore` |$\neg$ `\neg` or `\lnot`
|
||||
|$\exists$ `\exists` |$\subset$ `\subset` |$\because$ `\because` |$\emptyset$ `\emptyset`
|
||||
|$\nexists$ `\nexists`|$\supset$ `\supset` |$\mapsto$ `\mapsto` |$\varnothing$ `\varnothing`
|
||||
|$\in$ `\in` |$\mid$ `\mid` |$\to$ `\to`|$\implies$ `\implies`
|
||||
|$\notin$ `\notin` |$\land$ `\land`|$\gets$ `\gets` |$\impliedby$ `\impliedby`
|
||||
|$\ni$ `\ni` |$\lor$ `\lor` |$\leftrightarrow$ `\leftrightarrow`|$\iff$ `\iff`
|
||||
|$\notni$ `\notni` || |
|
||||
|
||||
Direct Input:`∀ ∴ ∁ ∵ ∃ ∣ ∈ ∉ ∋ ⊂ ⊃ ∧ ∨ ↦ → ← ↔ ¬ ℂ ℍ ℕ ℙ ℚ ℝ ℤ`
|
||||
|
||||
## Macros
|
||||
|
||||
|||
|
||||
|:-------------------------------------|:------
|
||||
|$\def\foo{x^2} \foo + \foo$ | `\def\foo{x^2} \foo + \foo`
|
||||
|$\gdef\bar#1{#1^2} \bar{y} + \bar{y}$ | `\gdef\bar#1{#1^2} \bar{y} + \bar{y}`
|
||||
|$~$ | `\global\def\macroname#1#2…{definition}`
|
||||
|$~$ | `\newcommand\macroname[numargs]{definition}`
|
||||
|$~$ | `\renewcommand\macroname[numargs]{definition}`
|
||||
|$~$ | `\providecommand\macroname[numargs]{definition}`
|
||||
|
||||
Macros can also be defined in the KaTeX [rendering options](./options).
|
||||
|
||||
Macros accept up to ten arguments: #1, #2, etc.
|
||||
|
||||
`\gdef` and `\global\def` macros will persist between math expressions.
|
||||
|
||||
Available functions include:
|
||||
|
||||
`\mathchoice` `\TextOrMath` `\@ifstar` `\@ifnextchar` `\@firstoftwo` `\@secondoftwo` `\relax`
|
||||
|
||||
@ is a valid character for commands, as if `\makeatletter` were in effect.
|
||||
|
||||
## Operators
|
||||
|
||||
### Big Operators
|
||||
|
||||
|||||
|
||||
|----------|-------------|-------------|--------------|
|
||||
| $\sum$ `\sum` | $\prod$ `\prod`| $\bigvee$ `\bigvee` | $\bigotimes$ `\bigotimes`
|
||||
| $\int$ `\int` | $\coprod$ `\coprod` | $\bigwedge$ `\bigwedge` | $\bigoplus$ `\bigoplus`
|
||||
| $\iint$ `\iint`| $\intop$ `\intop` | $\bigcap$ `\bigcap` | $\bigodot$ `\bigodot`
|
||||
| $\iiint$ `\iiint` | $\smallint$ `\smallint` | $\bigcup$ `\bigcup` | $\biguplus$ `\biguplus`
|
||||
| $\oint$ `\oint`| | $\bigsqcup$ `\bigsqcup` |
|
||||
|
||||
Direct Input: $∫ ∬ ∭ ∮ ∏ ∐ ∑ ⋀ ⋁ ⋂ ⋃ ⨀ ⨁ ⨂ ⨄ ⨆$
|
||||
|
||||
### Binary Operators
|
||||
|
||||
|||||
|
||||
|-------------|-------------------|-------------------|--------------------|
|
||||
| $+$ `+`| $\cdot$ `\cdot` | $\gtrdot$ `\gtrdot`| $x \pmod a$ `x \pmod a`|
|
||||
| $-$ `-`| $\cdotp$ `\cdotp` | $\intercal$ `\intercal` | $x \pod a$ `x \pod a` |
|
||||
| $/$ `/`| $\centerdot$ `\centerdot`| $\land$ `\land` | $\rhd$ `\rhd` |
|
||||
| $*$ `*`| $\circ$ `\circ` | $\leftthreetimes$ `\leftthreetimes` | $\rightthreetimes$ `\rightthreetimes` |
|
||||
| $\amalg$ `\amalg` | $\circledast$ `\circledast` | $\ldotp$ `\ldotp` | $\rtimes$ `\rtimes` |
|
||||
| $\And$ `\And`| $\circledcirc$ `\circledcirc` | $\lor$ `\lor`| $\setminus$ `\setminus` |
|
||||
| $\ast$ `\ast`| $\circleddash$ `\circleddash` | $\lessdot$ `\lessdot` | $\smallsetminus$ `\smallsetminus`|
|
||||
| $\barwedge$ `\barwedge` | $\Cup$ `\Cup`| $\lhd$ `\lhd`| $\sqcap$ `\sqcap` |
|
||||
| $\bigcirc$ `\bigcirc` | $\cup$ `\cup`| $\ltimes$ `\ltimes`| $\sqcup$ `\sqcup` |
|
||||
| $\bmod$ `\bmod` | $\curlyvee$ `\curlyvee` | $x \mod a$ `x\mod a`| $\times$ `\times` |
|
||||
| $\boxdot$ `\boxdot`| $\curlywedge$ `\curlywedge` | $\mp$ `\mp` | $\unlhd$ `\unlhd` |
|
||||
| $\boxminus$ `\boxminus` | $\div$ `\div`| $\odot$ `\odot` | $\unrhd$ `\unrhd` |
|
||||
| $\boxplus$ `\boxplus` | $\divideontimes$ `\divideontimes` | $\ominus$ `\ominus`| $\uplus$ `\uplus` |
|
||||
| $\boxtimes$ `\boxtimes` | $\dotplus$ `\dotplus` | $\oplus$ `\oplus` | $\vee$ `\vee` |
|
||||
| $\bullet$ `\bullet`| $\doublebarwedge$ `\doublebarwedge` | $\otimes$ `\otimes`| $\veebar$ `\veebar` |
|
||||
| $\Cap$ `\Cap`| $\doublecap$ `\doublecap`| $\oslash$ `\oslash`| $\wedge$ `\wedge` |
|
||||
| $\cap$ `\cap`| $\doublecup$ `\doublecup`| $\pm$ `\pm` | $\wr$ `\wr` |
|
||||
|
||||
Direct Input: $+ - / * ⋅ ± × ÷ ∓ ∔ ∧ ∨ ∩ ∪ ≀ ⊎ ⊓ ⊔ ⊕ ⊖ ⊗ ⊘ ⊙ ⊚ ⊛ ⊝$
|
||||
|
||||
### Fractions and Binomial Coefficients
|
||||
|
||||
||||
|
||||
|:--------------------------|:----------------------------|:-----
|
||||
|$\frac{a}{b}$ `\frac{a}{b}`|$\tfrac{a}{b}$ `\tfrac{a}{b}`|${a}/{b}$ `{a}/{b}`
|
||||
|${a}\over{b}$ `{a}\over{b}`|$\dfrac{a}{b}$ `\dfrac{a}{b}`|$\cfrac{a}{1 + \cfrac{1}{b}}$ `\cfrac{a}{1 + \cfrac{1}{b}}`
|
||||
|
||||
|||
|
||||
|:------------------------------|:-----
|
||||
|$\binom{n}{k}$ `\binom{n}{k}` |$\dbinom{n}{k}$ `\dbinom{n}{k}`
|
||||
|${n}\choose{k}$ `{n}\choose{k}`|$\tbinom{n}{k}$ `\tbinom{n}{k}`
|
||||
|
||||
### Math Operators
|
||||
|
||||
|||||
|
||||
|-----------|---------|-----------------|-----------|
|
||||
| $\arcsin$ `\arcsin` | $\cotg$ `\cotg` | $\ln$ `\ln` | $\det$ `\det` |
|
||||
| $\arccos$ `\arccos` | $\coth$ `\coth` | $\log$ `\log` | $\gcd$ `\gcd` |
|
||||
| $\arctan$ `\arctan` | $\csc$ `\csc` | $\sec$ `\sec` | $\inf$ `\inf` |
|
||||
| $\arctg$ `\arctg` | $\ctg$ `\ctg` | $\sin$ `\sin` | $\lim$ `\lim` |
|
||||
| $\arcctg$ `\arcctg` | $\cth$ `\cth` | $\sinh$ `\sinh`| $\liminf$ `\liminf` |
|
||||
| $\arg$ `\arg` | $\deg$ `\deg` | $\sh$ `\sh` | $\limsup$ `\limsup` |
|
||||
| $\ch$ `\ch` | $\dim$ `\dim` | $\tan$ `\tan` | $\max$ `\max` |
|
||||
| $\cos$ `\cos` | $\exp$ `\exp` | $\tanh$ `\tanh`| $\min$ `\min` |
|
||||
| $\cosec$ `\cosec` | $\hom$ `\hom` | $\tg$ `\tg` | $\Pr$ `\Pr` |
|
||||
| $\cosh$ `\cosh`| $\ker$ `\ker` | $\th$ `\th` | $\sup$ `\sup` |
|
||||
| $\cot$ `\cot` | $\lg$ `\lg`| $\operatorname{f}$ `\operatorname{f}` | |
|
||||
|
||||
Functions on the right column of this table can take `\limits`.
|
||||
|
||||
### \sqrt
|
||||
|
||||
$\sqrt{x}$ `\sqrt{x}`
|
||||
|
||||
$\sqrt[3]{x}$ `\sqrt[3]{x}`
|
||||
|
||||
## Relations
|
||||
|
||||
$\stackrel{!}{=}$ `\stackrel{!}{=}`
|
||||
|
||||
|||||
|
||||
|:----------------------------|:--------------------------------|:--------------------------------|:-----
|
||||
|$=$ `=` |$\eqcirc$ `\eqcirc` |$\lesseqgtr$ `\lesseqgtr` |$\sqsupset$ `\sqsupset`
|
||||
|$<$ `<` |$\eqcolon$ `\eqcolon`|$\lesseqqgtr$ `\lesseqqgtr`|$\sqsupseteq$ `\sqsupseteq`
|
||||
|$>$ `>` |$\Eqcolon$ `\Eqcolon`|$\lessgtr$ `\lessgtr`|$\Subset$ `\Subset`
|
||||
|$:$ `:` |$\eqqcolon$ `\eqqcolon` |$\lesssim$ `\lesssim`|$\subset$ `\subset`
|
||||
|$\approx$ `\approx` |$\Eqqcolon$ `\Eqqcolon` |$\ll$ `\ll` |$\subseteq$ `\subseteq`
|
||||
|$\approxeq$ `\approxeq`|$\eqsim$ `\eqsim` |$\lll$ `\lll` |$\subseteqq$ `\subseteqq`
|
||||
|$\asymp$ `\asymp`|$\eqslantgtr$ `\eqslantgtr`|$\llless$ `\llless` |$\succ$ `\succ`
|
||||
|$\backepsilon$ `\backepsilon`|$\eqslantless$ `\eqslantless` |$\lt$ `\lt` |$\succapprox$ `\succapprox`
|
||||
|$\backsim$ `\backsim` |$\equiv$ `\equiv` |$\mid$ `\mid` |$\succcurlyeq$ `\succcurlyeq`
|
||||
|$\backsimeq$ `\backsimeq` |$\fallingdotseq$ `\fallingdotseq`|$\models$ `\models` |$\succeq$ `\succeq`
|
||||
|$\between$ `\between` |$\frown$ `\frown` |$\multimap$ `\multimap` |$\succsim$ `\succsim`
|
||||
|$\bowtie$ `\bowtie` |$\ge$ `\ge` |$\owns$ `\owns`|$\Supset$ `\Supset`
|
||||
|$\bumpeq$ `\bumpeq` |$\geq$ `\geq` |$\parallel$ `\parallel` |$\supset$ `\supset`
|
||||
|$\Bumpeq$ `\Bumpeq` |$\geqq$ `\geqq`|$\perp$ `\perp`|$\supseteq$ `\supseteq`
|
||||
|$\circeq$ `\circeq` |$\geqslant$ `\geqslant` |$\pitchfork$ `\pitchfork` |$\supseteqq$ `\supseteqq`
|
||||
|$\colonapprox$ `\colonapprox`|$\gg$ `\gg` |$\prec$ `\prec`|$\thickapprox$ `\thickapprox`
|
||||
|$\Colonapprox$ `\Colonapprox`|$\ggg$ `\ggg` |$\precapprox$ `\precapprox`|$\thicksim$ `\thicksim`
|
||||
|$\coloneq$ `\coloneq` |$\gggtr$ `\gggtr` |$\preccurlyeq$ `\preccurlyeq` |$\trianglelefteq$ `\trianglelefteq`
|
||||
|$\Coloneq$ `\Coloneq` |$\gt$ `\gt` |$\preceq$ `\preceq` |$\triangleq$ `\triangleq`
|
||||
|$\coloneqq$ `\coloneqq`|$\gtrapprox$ `\gtrapprox` |$\precsim$ `\precsim`|$\trianglerighteq$ `\trianglerighteq`
|
||||
|$\Coloneqq$ `\Coloneqq`|$\gtreqless$ `\gtreqless` |$\propto$ `\propto` |$\varpropto$ `\varpropto`
|
||||
|$\colonsim$ `\colonsim`|$\gtreqqless$ `\gtreqqless`|$\risingdotseq$ `\risingdotseq` |$\vartriangle$ `\vartriangle`
|
||||
|$\Colonsim$ `\Colonsim`|$\gtrless$ `\gtrless`|$\shortmid$ `\shortmid` |$\vartriangleleft$ `\vartriangleleft`
|
||||
|$\cong$ `\cong` |$\gtrsim$ `\gtrsim` |$\shortparallel$ `\shortparallel`|$\vartriangleright$ `\vartriangleright`
|
||||
|$\curlyeqprec$ `\curlyeqprec`|$\in$ `\in` |$\sim$ `\sim` |$\vcentcolon$ `\vcentcolon`
|
||||
|$\curlyeqsucc$ `\curlyeqsucc`|$\Join$ `\Join`|$\simeq$ `\simeq` |$\vdash$ `\vdash`
|
||||
|$\dashv$ `\dashv`|$\le$ `\le` |$\smallfrown$ `\smallfrown`|$\vDash$ `\vDash`
|
||||
|$\dblcolon$ `\dblcolon`|$\leq$ `\leq` |$\smallsmile$ `\smallsmile`|$\Vdash$ `\Vdash`
|
||||
|$\doteq$ `\doteq`|$\leqq$ `\leqq`|$\smile$ `\smile` |$\Vvdash$ `\Vvdash`
|
||||
|$\Doteq$ `\Doteq`|$\leqslant$ `\leqslant` |$\sqsubset$ `\sqsubset` |
|
||||
|$\doteqdot$ `\doteqdot`|$\lessapprox$ `\lessapprox`|$\sqsubseteq$ `\sqsubseteq`|
|
||||
|
||||
|
||||
Direct Input: $= < > : ∈ ∋ ∝ ∼ ∽ ≂ ≃ ≅ ≈ ≊ ≍ ≎ ≏ ≐ ≑ ≒ ≓ ≖ ≗ ≜ ≡ ≤ ≥ ≦ ≧$<br>
|
||||
$≫ ≬ ≳ ≷ ≺ ≻ ≼ ≽ ≾ ≿ ⊂ ⊃ ⊆ ⊇ ⊏ ⊐ ⊑ ⊒ ⊢ ⊣ ⊩ ⊪ ⊸ ⋈ ⋍ ⋐ ⋑ ⋔ ⋙ ⋛ ⋞ ⋟ ⌢ ⌣$ <br>
|
||||
$⩾ ⪆ ⪌ ⪕ ⪖ ⪯ ⪰ ⪷ ⪸ ⫅ ⫆ ≲ ⩽ ⪅ ≶ ⋚ ⪋ ⟂ ⊨ ≔ ≕ ⩴$
|
||||
|
||||
### Negated Relations
|
||||
|
||||
$\not =$ `\not =`
|
||||
|
||||
|||||
|
||||
|--------------|-------------------|---------------------|------------------|
|
||||
| $\gnapprox$ `\gnapprox` | $\ngeqslant$ `\ngeqslant`| $\nsubseteq$ `\nsubseteq` | $\precneqq$ `\precneqq`|
|
||||
| $\gneq$ `\gneq`| $\ngtr$ `\ngtr` | $\nsubseteqq$ `\nsubseteqq` | $\precnsim$ `\precnsim`|
|
||||
| $\gneqq$ `\gneqq` | $\nleq$ `\nleq` | $\nsucc$ `\nsucc`| $\subsetneq$ `\subsetneq` |
|
||||
| $\gnsim$ `\gnsim` | $\nleqq$ `\nleqq` | $\nsucceq$ `\nsucceq` | $\subsetneqq$ `\subsetneqq` |
|
||||
| $\gvertneqq$ `\gvertneqq` | $\nleqslant$ `\nleqslant`| $\nsupseteq$ `\nsupseteq` | $\succnapprox$ `\succnapprox`|
|
||||
| $\lnapprox$ `\lnapprox` | $\nless$ `\nless` | $\nsupseteqq$ `\nsupseteqq` | $\succneqq$ `\succneqq`|
|
||||
| $\lneq$ `\lneq`| $\nmid$ `\nmid` | $\ntriangleleft$ `\ntriangleleft` | $\succnsim$ `\succnsim`|
|
||||
| $\lneqq$ `\lneqq` | $\notin$ `\notin` | $\ntrianglelefteq$ `\ntrianglelefteq` | $\supsetneq$ `\supsetneq` |
|
||||
| $\lnsim$ `\lnsim` | $\notni$ `\notni` | $\ntriangleright$ `\ntriangleright`| $\supsetneqq$ `\supsetneqq` |
|
||||
| $\lvertneqq$ `\lvertneqq` | $\nparallel$ `\nparallel`| $\ntrianglerighteq$ `\ntrianglerighteq` | $\varsubsetneq$ `\varsubsetneq` |
|
||||
| $\ncong$ `\ncong` | $\nprec$ `\nprec` | $\nvdash$ `\nvdash` | $\varsubsetneqq$ `\varsubsetneqq` |
|
||||
| $\ne$ `\ne` | $\npreceq$ `\npreceq` | $\nvDash$ `\nvDash` | $\varsupsetneq$ `\varsupsetneq` |
|
||||
| $\neq$ `\neq` | $\nshortmid$ `\nshortmid`| $\nVDash$ `\nVDash` | $\varsupsetneqq$ `\varsupsetneqq` |
|
||||
| $\ngeq$ `\ngeq`| $\nshortparallel$ `\nshortparallel` | $\nVdash$ `\nVdash` ||
|
||||
| $\ngeqq$ `\ngeqq` | $\nsim$ `\nsim` | $\precnapprox$ `\precnapprox`||
|
||||
|
||||
Direct Input: $∉ ∌ ∤ ∦ ≁ ≆ ≠ ≨ ≩ ≮ ≯ ≰ ≱ ⊀ ⊁ ⊈ ⊉ ⊊ ⊋ ⊬ ⊭ ⊮ ⊯ ⋠ ⋡$<br>
|
||||
$⋦ ⋧ ⋨ ⋩ ⋬ ⋭ ⪇ ⪈ ⪉ ⪊ ⪵ ⪶ ⪹ ⪺ ⫋ ⫌$
|
||||
|
||||
### Arrows
|
||||
|
||||
||||
|
||||
|:--------------------------------------|:--------------------------------------------|:-----
|
||||
|$\circlearrowleft$ `\circlearrowleft` |$\Leftrightarrow$ `\Leftrightarrow` |$\rightarrow$ `\rightarrow`
|
||||
|$\circlearrowright$ `\circlearrowright`|$\leftrightarrows$ `\leftrightarrows` |$\Rightarrow$ `\Rightarrow`
|
||||
|$\curvearrowleft$ `\curvearrowleft` |$\leftrightharpoons$ `\leftrightharpoons` |$\rightarrowtail$ `\rightarrowtail`
|
||||
|$\curvearrowright$ `\curvearrowright` |$\leftrightsquigarrow$ `\leftrightsquigarrow`|$\rightharpoondown$ `\rightharpoondown`
|
||||
|$\dashleftarrow$ `\dashleftarrow`|$\Lleftarrow$ `\Lleftarrow`|$\rightharpoonup$ `\rightharpoonup`
|
||||
|$\dashrightarrow$ `\dashrightarrow` |$\longleftarrow$ `\longleftarrow`|$\rightleftarrows$ `\rightleftarrows`
|
||||
|$\downarrow$ `\downarrow` |$\Longleftarrow$ `\Longleftarrow`|$\rightleftharpoons$ `\rightleftharpoons`
|
||||
|$\Downarrow$ `\Downarrow` |$\longleftrightarrow$ `\longleftrightarrow` |$\rightrightarrows$ `\rightrightarrows`
|
||||
|$\downdownarrows$ `\downdownarrows` |$\Longleftrightarrow$ `\Longleftrightarrow` |$\rightsquigarrow$ `\rightsquigarrow`
|
||||
|$\downharpoonleft$ `\downharpoonleft` |$\longmapsto$ `\longmapsto`|$\Rrightarrow$ `\Rrightarrow`
|
||||
|$\downharpoonright$ `\downharpoonright`|$\longrightarrow$ `\longrightarrow` |$\Rsh$ `\Rsh`
|
||||
|$\gets$ `\gets`|$\Longrightarrow$ `\Longrightarrow` |$\searrow$ `\searrow`
|
||||
|$\hookleftarrow$ `\hookleftarrow`|$\looparrowleft$ `\looparrowleft`|$\swarrow$ `\swarrow`
|
||||
|$\hookrightarrow$ `\hookrightarrow` |$\looparrowright$ `\looparrowright` |$\to$ `\to`
|
||||
|$\iff$ `\iff` |$\Lsh$ `\Lsh` |$\twoheadleftarrow$ `\twoheadleftarrow`
|
||||
|$\impliedby$ `\impliedby` |$\mapsto$ `\mapsto` |$\twoheadrightarrow$ `\twoheadrightarrow`
|
||||
|$\implies$ `\implies`|$\nearrow$ `\nearrow`|$\uparrow$ `\uparrow`
|
||||
|$\leadsto$ `\leadsto`|$\nleftarrow$ `\nleftarrow`|$\Uparrow$ `\Uparrow`
|
||||
|$\leftarrow$ `\leftarrow` |$\nLeftarrow$ `\nLeftarrow`|$\updownarrow$ `\updownarrow`
|
||||
|$\Leftarrow$ `\Leftarrow` |$\nleftrightarrow$ `\nleftrightarrow` |$\Updownarrow$ `\Updownarrow`
|
||||
|$\leftarrowtail$ `\leftarrowtail`|$\nLeftrightarrow$ `\nLeftrightarrow` |$\upharpoonleft$ `\upharpoonleft`
|
||||
|$\leftharpoondown$ `\leftharpoondown` |$\nrightarrow$ `\nrightarrow` |$\upharpoonright$ `\upharpoonright`
|
||||
|$\leftharpoonup$ `\leftharpoonup`|$\nRightarrow$ `\nRightarrow` |$\upuparrows$ `\upuparrows`
|
||||
|$\leftleftarrows$ `\leftleftarrows` |$\nwarrow$ `\nwarrow`|
|
||||
|$\leftrightarrow$ `\leftrightarrow` |$\restriction$ `\restriction` |
|
||||
|
||||
|
||||
Direct Input∷ $← ↑ → ↓ ↔ ↕ ↖ ↗ ↘ ↙ ↚ ↛ ↞ ↠ ↢ ↣ ↦ ↩ ↪ ↫ ↬ ↭ ↮ ↰ ↱$<br>
|
||||
$↶ ↷ ↺ ↻ ↼ ↽ ↾ ↾ ↿ ⇀ ⇁ ⇂ ⇃ ⇄ ⇆ ⇇ ⇈ ⇉ ⇊ ⇋ ⇌$<br>
|
||||
$⇍ ⇎ ⇏ ⇐ ⇑ ⇒ ⇓ ⇔ ⇕ ⇚ ⇛ ⇝ ⇠ ⇢ ⟵ ⟶ ⟷ ⟸ ⟹ ⟺ ⟼$ ↽
|
||||
|
||||
**Extensible Arrows**
|
||||
|
||||
|||
|
||||
|:----------------------------------------------------|:-----
|
||||
|$\xleftarrow{abc}$ `\xleftarrow{abc}` |$\xrightarrow[under]{over}$ `\xrightarrow[under]{over}`
|
||||
|$\xLeftarrow{abc}$ `\xLeftarrow{abc}` |$\xRightarrow{abc}$ `\xRightarrow{abc}`
|
||||
|$\xleftrightarrow{abc}$ `\xleftrightarrow{abc}` |$\xLeftrightarrow{abc}$ `\xLeftrightarrow{abc}`
|
||||
|$\xhookleftarrow{abc}$ `\xhookleftarrow{abc}` |$\xhookrightarrow{abc}$ `\xhookrightarrow{abc}`
|
||||
|$\xtwoheadleftarrow{abc}$ `\xtwoheadleftarrow{abc}` |$\xtwoheadrightarrow{abc}$ `\xtwoheadrightarrow{abc}`
|
||||
|$\xleftharpoonup{abc}$ `\xleftharpoonup{abc}` |$\xrightharpoonup{abc}$ `\xrightharpoonup{abc}`
|
||||
|$\xleftharpoondown{abc}$ `\xleftharpoondown{abc}` |$\xrightharpoondown{abc}$ `\xrightharpoondown{abc}`
|
||||
|$\xleftrightharpoons{abc}$ `\xleftrightharpoons{abc}`|$\xrightleftharpoons{abc}$ `\xrightleftharpoons{abc}`
|
||||
|$\xtofrom{abc}$ `\xtofrom{abc}` |$\xmapsto{abc}$ `\xmapsto{abc}`
|
||||
|$\xlongequal{abc}$ `\xlongequal{abc}` |$~$
|
||||
|
||||
Extensible arrows all can take an optional argument in the same manner<br>as `\xrightarrow[under]{over}`.
|
||||
|
||||
## Style, Color, Size, and Font
|
||||
|
||||
**Class Assignment**
|
||||
|
||||
`\mathbin` `\mathclose` `\mathinner` `\mathop`<br>
|
||||
`\mathopen` `\mathord` `\mathpunct` `\mathrel`
|
||||
|
||||
**Color**
|
||||
|
||||
$\color{blue} F=ma$ `\color{blue} F=ma`
|
||||
|
||||
Note that KaTeX `\color` acts like a switch. This aligns with LaTeX and differs from MathJax.
|
||||
Other KaTeX color functions expect the content to be a function argument:
|
||||
|
||||
$\textcolor{blue}{F=ma}$ `\textcolor{blue}{F=ma}`<br>
|
||||
$\textcolor{#228B22}{F=ma}$ `\textcolor{#228B22}{F=ma}`<br>
|
||||
$\colorbox{aqua}{A}$ `\colorbox{aqua}{A}`<br>
|
||||
$\fcolorbox{red}{aqua}{A}$ `\fcolorbox{red}{aqua}{A}`
|
||||
|
||||
For color definition, KaTeX color functions will accept the standard HTML [predefined color names](https://www.w3schools.com/colors/colors-names.asp). They will also accept an RGB argument in CSS hexadecimal style.
|
||||
|
||||
**Font**
|
||||
|
||||
||||
|
||||
|:----------------------------------|:----------------------------------|:-----
|
||||
|$\mathrm{AB}$ `\mathrm{AB}` |$\mathbf{AB}$ `\mathbf{AB}` |$\mathit{AB}$ `\mathit{AB}`
|
||||
|$\textrm{AB}$ `\textrm{AB}` |$\textbf{AB}$ `\textbf{AB}` |$\textit{AB}$ `\textit{AB}`
|
||||
|$\rm AB$ `\rm AB`|$\bf AB$ `\bf AB`|$\it AB$ `\it AB`
|
||||
|$\textnormal{AB}$ `\textnormal{AB}`|$\bold{AB}$ `\bold{AB}`|$\Bbb{AB}$ `\Bbb{AB}`
|
||||
|$\text{AB}$ `\text{AB}`|$\boldsymbol{AB}$ `\boldsymbol{AB}`|$\mathbb{AB}$ `\mathbb{AB}`
|
||||
|$\mathsf{AB}$ `\mathsf{AB}` |$\bm{AB}$ `\bm{AB}` |$\frak{AB}$ `\frak{AB}`
|
||||
|$\textsf{AB}$ `\textsf{AB}` |$\mathtt{AB}$ `\mathtt{AB}` |$\mathfrak{AB}$ `\mathfrak{AB}`
|
||||
|$\sf AB$ `\sf AB`|$\texttt{AB}$ `\texttt{AB}` |$\mathcal{AB}$ `\mathcal{AB}`
|
||||
| |$\tt AB$ `\tt AB`|$\mathscr{AB}$ `\mathscr{AB}`
|
||||
|
||||
One can stack font family, font weight, and font shape by using the `\textXX` versions of the font functions. So `\textsf{\textbf{H}}` will produce $\textsf{\textbf{H}}$. The other versions do not stack, e.g., `\mathsf{\mathbf{H}}` will produce $\mathsf{\mathbf{H}}$.
|
||||
|
||||
**Size**
|
||||
|
||||
|||
|
||||
|:----------------------|:-----
|
||||
|$\Huge AB$ `\Huge AB` |$\normalsize AB$ `\normalsize AB`
|
||||
|$\huge AB$ `\huge AB` |$\small AB$ `\small AB`
|
||||
|$\LARGE AB$ `\LARGE AB`|$\footnotesize AB$ `\footnotesize AB`
|
||||
|$\Large AB$ `\Large AB`|$\scriptsize AB$ `\scriptsize AB`
|
||||
|$\large AB$ `\large AB`|$\tiny AB$ `\tiny AB`
|
||||
|
||||
|
||||
**Style**
|
||||
|
||||
|||
|
||||
|:-------------------------------------------------------|:------
|
||||
|$\displaystyle\sum_{i=1}^n$ `\displaystyle\sum_{i=1}^n` | $~$
|
||||
|$\textstyle\sum_{i=1}^n$ `\textstyle\sum_{i=1}^n` | $~$
|
||||
|$\scriptstyle x$ `\scriptstyle x` | The size of a first sub/superscript |
|
||||
|$\scriptscriptstyle x$ `\scriptscriptstyle x` | The size of subsequent sub/superscripts |
|
||||
|$\lim\limits_x$ `\lim\limits_x` | $~$
|
||||
|$\lim\nolimits_x$ `\lim\nolimits_x`| $~$
|
||||
|$\verb!x^2!$ `\verb!x^2!` | $~$
|
||||
|
||||
`\text{…}` will accept nested `$…$` fragments and render them in math mode.
|
||||
|
||||
## Symbols and Punctuation
|
||||
|
||||
||||
|
||||
|:------------------------------------------------------|:--------------------------------------------|:-----
|
||||
| `% comment` |$\dots$ `\dots`|$\nabla$ `\nabla`
|
||||
|$\%$ `\%` |$\cdots$ `\cdots` |$\infty$ `\infty`
|
||||
|$\#$ `\#` |$\ddots$ `\ddots` |$\checkmark$ `\checkmark`
|
||||
|$\&$ `\&` |$\ldots$ `\ldots` |$\dag$ `\dag`
|
||||
|$\_$ `\_` |$\vdots$ `\vdots` |$\dagger$ `\dagger`
|
||||
|$\text{\textunderscore}$ `\text{\textunderscore}`|$\mathellipsis$ `\mathellipsis` |$\text{\textdagger}$ `\text{\textdagger}`
|
||||
|$\text{--}$ `\text{--}` |$\text{\textellipsis}$ `\text{\textellipsis}`|$\ddag$ `\ddag`
|
||||
|$\text{\textendash}$ `\text{\textendash}` |$\Box$ `\Box` |$\ddagger$ `\ddagger`
|
||||
|$\text{---}$ `\text{---}`|$\square$ `\square` |$\text{\textdaggerdbl}$ `\text{\textdaggerdbl}`
|
||||
|$\text{\textemdash}$ `\text{\textemdash}` |$\blacksquare$ `\blacksquare` |$\angle$ `\angle`
|
||||
|$\text{\textasciitilde}$ `\text{\textasciitilde}`|$\triangle$ `\triangle` |$\measuredangle$ `\measuredangle`
|
||||
|$`$ ```|$\triangledown$ `\triangledown` |$\sphericalangle$ `\sphericalangle`
|
||||
|$\text{\textquoteleft}$ `\text{\textquoteleft}` |$\triangleleft$ `\triangleleft` |$\top$ `\top`
|
||||
|$\lq$ `\lq` |$\triangleright$ `\triangleright`|$\bot$ `\bot`
|
||||
|$\text{\textquoteright}$ `\text{\textquoteright}`|$\bigtriangledown$ `\bigtriangledown` |$\text{\textdollar}$ `\$`
|
||||
|$\rq$ `\rq` |$\bigtriangleup$ `\bigtriangleup`|$\text{\textdollar}$ `\text{\textdollar}`
|
||||
|$\text{\textquotedblleft}$ `\text{\textquotedblleft}` |$\blacktriangle$ `\blacktriangle`|$\pounds$ `\pounds`
|
||||
|$"$ `"`|$\blacktriangledown$ `\blacktriangledown` |$\text{\textsterling}$ `\text{\textsterling}`
|
||||
|$\text{\textquotedblright}$ `\text{\textquotedblright}`|$\blacktriangleleft$ `\blacktriangleleft` |$\yen$ `\yen`
|
||||
|$\colon$ `\colon` |$\blacktriangleright$ `\blacktriangleright` |$\surd$ `\surd`
|
||||
|$\backprime$ `\backprime`|$\diamond$ `\diamond`|$\degree$ `\degree`
|
||||
|$\prime$ `\prime` |$\Diamond$ `\Diamond`|$\diagdown$ `\diagdown`
|
||||
|$\text{\textless}$ `\text{\textless}`|$\lozenge$ `\lozenge`|$\diagup$ `\diagup`
|
||||
|$\text{\textgreater}$ `\text{\textgreater}`|$\blacklozenge$ `\blacklozenge` |$\flat$ `\flat`
|
||||
|$\text{\textbar}$ `\text{\textbar}` |$\star$ `\star`|$\natural$ `\natural`
|
||||
|$\text{\textbardbl}$ `\text{\textbardbl}` |$\bigstar$ `\bigstar`|$\sharp$ `\sharp`
|
||||
|$\text{\textbraceleft}$ `\text{\textbraceleft}` |$\clubsuit$ `\clubsuit` |$\copyright$ `\copyright`
|
||||
|$\text{\textbraceright}$ `\text{\textbraceright}`|$\diamondsuit$ `\diamondsuit` |$\circledR$ `\circledR`
|
||||
|$\text{\P}$ `\text{\P}` |$\heartsuit$ `\heartsuit` |$\text{\textregistered}$ `\text{\textregistered}`
|
||||
|$\text{\S}$ `\text{\S}` |$\spadesuit$ `\spadesuit` |$\circledS$ `\circledS`
|
||||
|$\maltese$ `\maltese` |$\mho$ `\mho` |$\text{\textcircled a}$ `\text{\textcircled a}`
|
||||
|
||||
$\KaTeX$ `\KaTeX` $\LaTeX$ `\LaTeX`$\TeX$ `\TeX`
|
||||
|
||||
Direct Input: $£ ¥ ∇ ∞ · ∠ ∡ ∢ ♠ ♡ ♢ ♣ ♭ ♮ ♯ ✓ … ⋮ ⋯ ⋱ !$ ‼
|
||||
|
||||
## Units
|
||||
|
||||
In KaTeX, units are proportioned as they are in TeX.<br>
|
||||
KaTeX units are different than CSS units.
|
||||
|
||||
| KaTeX Unit | Value | KaTeX Unit | Value |
|
||||
|:--------------:|:------------------------|:--------------:|:--------------------|
|
||||
| em | CSS em| bp | 1/72 inch × F × G|
|
||||
| ex | CSS ex| pc | 12 KaTeX pt|
|
||||
| mu | 1/18 CSS em | dd | 1238/1157 KaTeX pt |
|
||||
| pt | 1/72.27 inch × F × G | cc | 14856/1157 KaTeX pt |
|
||||
| mm | 1 mm × F × G| nd | 685/642 KaTeX pt |
|
||||
| cm | 1 cm × F × G| nc | 1370/107 KaTeX pt|
|
||||
| in | 1 inch × F × G | sp | 1/65536 KaTeX pt |
|
||||
|
||||
where:
|
||||
|
||||
F = (font size of surrounding HTML text)/(10 pt)
|
||||
|
||||
G = 1.21 by default, because KaTeX font-size is normally 1.21 × the surrounding font size. This value [can be over-ridden](./font.html#font-size-and-lengths) by the CSS of an HTML page.
|
96
website/core/Footer.js
Normal file
96
website/core/Footer.js
Normal file
@@ -0,0 +1,96 @@
|
||||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
const React = require('react');
|
||||
|
||||
class Footer extends React.Component {
|
||||
docUrl(doc, language) {
|
||||
const baseUrl = this.props.config.baseUrl;
|
||||
return baseUrl + 'docs/' + (language ? language + '/' : '') + doc;
|
||||
}
|
||||
|
||||
pageUrl(doc, language) {
|
||||
const baseUrl = this.props.config.baseUrl;
|
||||
return baseUrl + (language ? language + '/' : '') + doc;
|
||||
}
|
||||
|
||||
render() {
|
||||
const currentYear = new Date().getFullYear();
|
||||
return (
|
||||
<footer className="nav-footer" id="footer">
|
||||
<section className="sitemap">
|
||||
<a href={this.props.config.baseUrl} className="nav-home">
|
||||
{this.props.config.footerIcon && (
|
||||
<img
|
||||
src={this.props.config.baseUrl + this.props.config.footerIcon}
|
||||
alt={this.props.config.title}
|
||||
width="66"
|
||||
height="58"
|
||||
/>
|
||||
)}
|
||||
</a>
|
||||
<div>
|
||||
<h5>Docs</h5>
|
||||
<a href={this.docUrl('node.html', this.props.language)}>
|
||||
Installation
|
||||
</a>
|
||||
<a href={this.docUrl('api.html', this.props.language)}>
|
||||
Usage
|
||||
</a>
|
||||
<a href={this.docUrl('options.html', this.props.language)}>
|
||||
Configuration
|
||||
</a>
|
||||
<a href={this.docUrl('support.html', this.props.language)}>
|
||||
Misc
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Community</h5>
|
||||
<a href={this.pageUrl('users.html', this.props.language)}>
|
||||
Who is using KaTeX?
|
||||
</a>
|
||||
<a href="https://gitter.im/Khan/KaTeX">Gitter Chat</a>
|
||||
<a
|
||||
href="http://stackoverflow.com/questions/tagged/katex"
|
||||
target="_blank"
|
||||
rel="noreferrer noopener">
|
||||
Stack Overflow
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<h5>More</h5>
|
||||
<a
|
||||
className="github-button"
|
||||
href={this.props.config.repoUrl}
|
||||
data-icon="octicon-star"
|
||||
data-count-href="/Khan/KaTeX/stargazers"
|
||||
data-show-count={true}
|
||||
data-count-aria-label="# stargazers on GitHub"
|
||||
aria-label="Star this project on GitHub">
|
||||
Star
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<a
|
||||
href="https://www.khanacademy.org/"
|
||||
target="_blank"
|
||||
className="fbOpenSource">
|
||||
<img
|
||||
src={this.props.config.baseUrl + 'img/khan-academy.png'}
|
||||
alt="Khan Academy"
|
||||
width="180"
|
||||
height="17"
|
||||
/>
|
||||
</a>
|
||||
<section className="copyright">{this.props.config.copyright}</section>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Footer;
|
14
website/package.json
Normal file
14
website/package.json
Normal file
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"scripts": {
|
||||
"start": "docusaurus-start",
|
||||
"build": "docusaurus-build",
|
||||
"publish-gh-pages": "docusaurus-publish",
|
||||
"write-translations": "docusaurus-write-translations",
|
||||
"version": "docusaurus-version",
|
||||
"rename-version": "docusaurus-rename-version"
|
||||
},
|
||||
"devDependencies": {
|
||||
"docusaurus": "^1.3.2"
|
||||
},
|
||||
"dependencies": {}
|
||||
}
|
49
website/pages/en/users.js
Normal file
49
website/pages/en/users.js
Normal file
@@ -0,0 +1,49 @@
|
||||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
const React = require('react');
|
||||
|
||||
const CompLibrary = require('../../core/CompLibrary.js');
|
||||
const Container = CompLibrary.Container;
|
||||
|
||||
const siteConfig = require(process.cwd() + '/siteConfig.js');
|
||||
|
||||
class Users extends React.Component {
|
||||
render() {
|
||||
if ((siteConfig.users || []).length === 0) {
|
||||
return null;
|
||||
}
|
||||
const editUrl = siteConfig.repoUrl + '/edit/master/website/siteConfig.js';
|
||||
const showcase = siteConfig.users.map((user, i) => {
|
||||
return (
|
||||
<a href={user.infoLink} key={i}>
|
||||
<img src={user.image} alt={user.caption} title={user.caption} />
|
||||
</a>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="mainContainer">
|
||||
<Container padding={['bottom', 'top']}>
|
||||
<div className="showcaseSection">
|
||||
<div className="prose">
|
||||
<h1>Who is Using KaTeX?</h1>
|
||||
<p>KaTeX is used by many projects</p>
|
||||
</div>
|
||||
<div className="logos">{showcase}</div>
|
||||
<p>Are you using KaTeX?</p>
|
||||
<a href={editUrl} className="button">
|
||||
Add your project
|
||||
</a>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Users;
|
105
website/pages/index.html
Normal file
105
website/pages/index.html
Normal file
@@ -0,0 +1,105 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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="http://khan.github.io/KaTeX/">
|
||||
<meta property="og:image" content="http://khan.github.io/KaTeX/og_logo.png">
|
||||
<meta property="og:description" content="Simple API, no dependencies – yet super-fast on all major browsers.">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.css" integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.js" integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.0/normalize.css" integrity="sha256-7GAtDQ79wTEOjhBKf70uBQG7A5yyb+8rigu07atXWDY=" crossorigin="anonymous">
|
||||
<link href="https://use.fontawesome.com/efe646278d.css" type="text/css" rel="stylesheet">
|
||||
<link href="static/index.css" type="text/css" rel="stylesheet">
|
||||
<script src="//use.typekit.net/ulc1wme.js"></script>
|
||||
<script>try{Typekit.load();}catch(e){}</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/node.html" role="button"><i class="fa fa-download"></i> Installation</a>
|
||||
<a href="docs/api.html" role="button"><i class="fa fa-book"></i> Documentation</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">
|
||||
<div class="demo-instructions">
|
||||
<label for="demo-input">Type an expression:</label>
|
||||
</div>
|
||||
<textarea id="demo-input" spellcheck="false">
|
||||
f(x) = \int_{-\infty}^\infty
|
||||
\hat f(\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’t need to reflow the page.</li>
|
||||
<li><b>Print quality:</b> KaTeX’s layout is based on Donald Knuth’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"><i class="fa fa-download"></i> Installation</a>
|
||||
<a href="docs/api.html" role="button"><i class="fa fa-book"></i> Documentation</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="img/khan-academy.png" alt="Khan Academy" width="180" height="17"></a>
|
||||
<span class="credits">
|
||||
Created by <a href="https://github.com/xymostech">Emily Eisenberg</a> and <a href="https://sophiebits.com/">Sophie Alpert</a>
|
||||
</span>
|
||||
</div></div>
|
||||
|
||||
<script src="js/index.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
startup();
|
||||
</script>
|
||||
<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>
|
183
website/remarkableKatex.js
Normal file
183
website/remarkableKatex.js
Normal file
@@ -0,0 +1,183 @@
|
||||
/* MIT License
|
||||
|
||||
Copyright (c) 2017 Brad Howes
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Plugin for Remarkable Markdown processor which transforms $..$ and $$..$$ sequences into math HTML using the
|
||||
* Katex package.
|
||||
*/
|
||||
module.exports = function(md, options) {
|
||||
var katex = require("../");
|
||||
|
||||
function renderKatex(source, displayMode) {
|
||||
return katex.renderToString(source, {displayMode: displayMode, throwOnError: false});
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse '$$' as a block. I don't think this is needed since it is already done in the parseInlineKatex
|
||||
* method. Based off of similar method in remarkable.
|
||||
*/
|
||||
function parseBlockKatex(state, startLine, endLine) {
|
||||
var marker, len, params, nextLine, mem,
|
||||
haveEndMarker = false,
|
||||
pos = state.bMarks[startLine] + state.tShift[startLine],
|
||||
max = state.eMarks[startLine];
|
||||
var dollar = 0x24;
|
||||
|
||||
if (pos + 1 > max) { return false; }
|
||||
|
||||
marker = state.src.charCodeAt(pos);
|
||||
if (marker !== dollar) { return false; }
|
||||
|
||||
// scan marker length
|
||||
mem = pos;
|
||||
pos = state.skipChars(pos, marker);
|
||||
len = pos - mem;
|
||||
|
||||
if (len != 2) { return false; }
|
||||
|
||||
// search end of block
|
||||
nextLine = startLine;
|
||||
|
||||
for (;;) {
|
||||
++nextLine;
|
||||
if (nextLine >= endLine) {
|
||||
|
||||
// unclosed block should be autoclosed by end of document.
|
||||
// also block seems to be autoclosed by end of parent
|
||||
break;
|
||||
}
|
||||
|
||||
pos = mem = state.bMarks[nextLine] + state.tShift[nextLine];
|
||||
max = state.eMarks[nextLine];
|
||||
|
||||
if (pos < max && state.tShift[nextLine] < state.blkIndent) {
|
||||
|
||||
// non-empty line with negative indent should stop the list:
|
||||
// - ```
|
||||
// test
|
||||
break;
|
||||
}
|
||||
|
||||
if (state.src.charCodeAt(pos) !== dollar) { continue };
|
||||
|
||||
if (state.tShift[nextLine] - state.blkIndent >= 4) {
|
||||
|
||||
// closing fence should be indented less than 4 spaces
|
||||
continue;
|
||||
}
|
||||
|
||||
pos = state.skipChars(pos, marker);
|
||||
|
||||
// closing code fence must be at least as long as the opening one
|
||||
if (pos - mem < len) { continue; }
|
||||
|
||||
// make sure tail has spaces only
|
||||
pos = state.skipSpaces(pos);
|
||||
|
||||
if (pos < max) { continue; }
|
||||
|
||||
haveEndMarker = true;
|
||||
|
||||
// found!
|
||||
break;
|
||||
}
|
||||
|
||||
// If a fence has heading spaces, they should be removed from its inner block
|
||||
len = state.tShift[startLine];
|
||||
|
||||
state.line = nextLine + (haveEndMarker ? 1 : 0);
|
||||
|
||||
var content = state.getLines(startLine + 1, nextLine, len, true)
|
||||
.replace(/[ \n]+/g, ' ')
|
||||
.trim();
|
||||
|
||||
state.tokens.push({
|
||||
type: 'katex',
|
||||
params: params,
|
||||
content: content,
|
||||
lines: [startLine, state.line],
|
||||
level: state.level,
|
||||
block: true
|
||||
});
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Look for '$' or '$$' spans in Markdown text. Based off of the 'fenced' parser in remarkable.
|
||||
*/
|
||||
function parseInlineKatex(state, silent) {
|
||||
var dollar = 0x24;
|
||||
var pos = state.pos;
|
||||
var start = pos, max = state.posMax, marker, matchStart, matchEnd ;
|
||||
|
||||
if (state.src.charCodeAt(pos) !== dollar) { return false; }
|
||||
++pos;
|
||||
|
||||
while (pos < max && state.src.charCodeAt(pos) === dollar) {
|
||||
++pos;
|
||||
}
|
||||
|
||||
marker = state.src.slice(start, pos);
|
||||
if (marker.length > 2) { return false; }
|
||||
|
||||
matchStart = matchEnd = pos;
|
||||
|
||||
while ((matchStart = state.src.indexOf('$', matchEnd)) !== -1) {
|
||||
matchEnd = matchStart + 1;
|
||||
|
||||
while (matchEnd < max && state.src.charCodeAt(matchEnd) === dollar) {
|
||||
++matchEnd;
|
||||
}
|
||||
|
||||
if (matchEnd - matchStart == marker.length) {
|
||||
if (!silent) {
|
||||
var content = state.src.slice(pos, matchStart)
|
||||
.replace(/[ \n]+/g, ' ')
|
||||
.trim();
|
||||
|
||||
state.push({
|
||||
type: 'katex',
|
||||
content: content,
|
||||
block: marker.length > 1,
|
||||
level: state.level
|
||||
});
|
||||
}
|
||||
|
||||
state.pos = matchEnd;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
if (! silent) state.pending += marker;
|
||||
state.pos += marker.length;
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
md.inline.ruler.push('katex', parseInlineKatex, options);
|
||||
md.block.ruler.push('katex', parseBlockKatex, options);
|
||||
md.renderer.rules.katex = function(tokens, idx) {
|
||||
return renderKatex(tokens[idx].content, tokens[idx].block);
|
||||
};
|
||||
};
|
8
website/sidebars.json
Normal file
8
website/sidebars.json
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"docs": {
|
||||
"Installation": ["node", "browser"],
|
||||
"Usage": ["api", "cli", "autorender", "libs"],
|
||||
"Configuring KaTeX": ["options", "security", "error", "font"],
|
||||
"Misc": ["supported", "issues"]
|
||||
}
|
||||
}
|
84
website/siteConfig.js
Normal file
84
website/siteConfig.js
Normal file
@@ -0,0 +1,84 @@
|
||||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
// See https://docusaurus.io/docs/site-config.html for all the possible
|
||||
// site configuration options.
|
||||
|
||||
/* List of projects/orgs using your project for the users page */
|
||||
const users = [
|
||||
{
|
||||
caption: 'GitLab',
|
||||
image: 'https://gitlab.com/gitlab-com/gitlab-artwork/raw/master/logo/logo-square.png',
|
||||
infoLink: 'https://gitlab.com/',
|
||||
pinned: true,
|
||||
},
|
||||
];
|
||||
|
||||
const siteConfig = {
|
||||
title: 'KaTeX',
|
||||
tagline: 'The fastest math typesetting library for the web',
|
||||
url: 'https://khan.github.io',
|
||||
baseUrl: '/KaTeX/',
|
||||
|
||||
// Used for publishing and more
|
||||
projectName: 'KaTeX',
|
||||
organizationName: 'Khan',
|
||||
|
||||
headerLinks: [
|
||||
{doc: 'node', label: 'Docs'},
|
||||
{page: 'users', label: 'Users'},
|
||||
{href: 'https://github.com/Khan/KaTeX', label: 'GitHub'},
|
||||
{search: true},
|
||||
],
|
||||
|
||||
// If you have users set above, you add it here:
|
||||
users,
|
||||
|
||||
/* path to images for header/footer */
|
||||
headerIcon: 'img/katex-logo.svg',
|
||||
footerIcon: 'img/katex-logo.svg',
|
||||
favicon: 'https://khan.github.io/favicon.ico',
|
||||
|
||||
disableHeaderTitle: true,
|
||||
|
||||
/* colors for website */
|
||||
colors: {
|
||||
primaryColor: '#329894',
|
||||
secondaryColor: '#266e6c',
|
||||
},
|
||||
|
||||
// This copyright info is used in /core/Footer.js and blog rss/atom feeds.
|
||||
copyright:
|
||||
'Copyright © ' +
|
||||
new Date().getFullYear() +
|
||||
' Khan Academy',
|
||||
|
||||
highlight: {
|
||||
// Highlight.js theme to use for syntax highlighting in code blocks
|
||||
theme: 'default',
|
||||
},
|
||||
|
||||
markdownPlugins: [function(md) {
|
||||
md.use(require('./remarkableKatex'));
|
||||
}],
|
||||
|
||||
scripts: ['https://buttons.github.io/buttons.js'],
|
||||
stylesheets: ['https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.css'],
|
||||
|
||||
separateCss: ['static/static', 'static\\static'],
|
||||
|
||||
/* On page navigation for the current documentation page */
|
||||
onPageNav: 'separate',
|
||||
|
||||
/* Open Graph and Twitter card images */
|
||||
ogImage: 'img/og_logo.png',
|
||||
twitterImage: 'img/og_logo.png',
|
||||
|
||||
repoUrl: 'https://github.com/Khan/KaTeX',
|
||||
};
|
||||
|
||||
module.exports = siteConfig;
|
18
website/static/css/custom.css
Normal file
18
website/static/css/custom.css
Normal file
@@ -0,0 +1,18 @@
|
||||
.fixedHeaderContainer header img {
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1024px) {
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1023px) {
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1400px) {
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1500px) {
|
||||
}
|
BIN
website/static/img/katex-comparison.gif
Normal file
BIN
website/static/img/katex-comparison.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 667 KiB |
67
website/static/img/katex-logo.svg
Normal file
67
website/static/img/katex-logo.svg
Normal file
@@ -0,0 +1,67 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 120 40.541" enable-background="new 0 0 120 40.541" xml:space="preserve">
|
||||
<g>
|
||||
<path fill="white" d="M4.618,27.925c-0.299,0.299-0.591,0.478-0.874,0.538c-0.284,0.06-1.039,0.105-2.264,0.135H0v2.062h0.493
|
||||
c0.508-0.09,2.66-0.135,6.456-0.135c3.796,0,5.948,0.045,6.456,0.135h0.493v-2.062h-1.48c-1.764-0.029-2.765-0.209-3.004-0.538
|
||||
c-0.09-0.119-0.135-1.584-0.135-4.394v-4.259l2.062-2.018c0.388-0.359,0.777-0.724,1.166-1.098
|
||||
c0.388-0.373,0.687-0.665,0.897-0.874c0.209-0.209,0.388-0.373,0.538-0.493l3.901,5.873c2.331,3.587,3.661,5.62,3.99,6.098
|
||||
c0.09,0.179,0.135,0.359,0.135,0.538c0,0.778-0.688,1.166-2.062,1.166h-0.359v2.062h0.493c0.628-0.09,2.764-0.135,6.412-0.135
|
||||
c0.269,0,0.673,0.008,1.211,0.022c0.538,0.015,0.956,0.022,1.255,0.022c0.298,0,0.68,0.008,1.143,0.022
|
||||
c0.463,0.015,0.807,0.03,1.031,0.045c0.224,0.015,0.366,0.022,0.426,0.022h0.359v-2.062h-0.942
|
||||
c-1.255-0.029-2.152-0.194-2.69-0.493c-0.419-0.239-0.778-0.583-1.076-1.031c-0.179-0.269-1.906-2.862-5.179-7.779
|
||||
c-3.273-4.917-4.91-7.39-4.91-7.42c0-0.029,1.33-1.33,3.99-3.901c2.66-2.57,4.065-3.93,4.215-4.08
|
||||
c1.315-1.076,3.094-1.674,5.335-1.793h0.628V0.037h-0.269c-0.03,0-0.135,0.008-0.314,0.022c-0.179,0.015-0.434,0.03-0.762,0.045
|
||||
c-0.329,0.015-0.613,0.022-0.852,0.022c-0.209,0-0.523,0.008-0.942,0.022c-0.419,0.015-0.747,0.022-0.986,0.022
|
||||
c-3.408,0-5.366-0.045-5.873-0.135h-0.448v2.062h0.179l0.202,0.022l0.247,0.022c0.836,0.209,1.255,0.643,1.255,1.3
|
||||
c-0.06,0.24-0.12,0.404-0.179,0.493c-0.06,0.12-2.272,2.317-6.636,6.591l-6.546,6.367l-0.045-6.95c0-4.663,0.015-7.024,0.045-7.084
|
||||
c0.06-0.508,0.897-0.762,2.511-0.762h1.076h0.986V0.037h-0.493c-0.509,0.09-2.661,0.135-6.456,0.135
|
||||
c-3.796,0-5.948-0.045-6.456-0.135H0v2.062h1.48c1.225,0.03,1.98,0.075,2.264,0.135c0.284,0.06,0.575,0.24,0.874,0.538V27.925z"/>
|
||||
<path fill="white" d="M39.542,11.067h1.793v-0.269c0.029-0.119,0.074-0.478,0.135-1.076c0.239-3.198,0.836-5.201,1.793-6.008
|
||||
c0.747-0.628,1.763-1.046,3.049-1.255c0.298-0.029,1.15-0.045,2.556-0.045h1.211c0.687,0,1.113,0.022,1.278,0.067
|
||||
c0.164,0.045,0.291,0.202,0.381,0.471c0.029,0.06,0.045,4.23,0.045,12.509v12.375c-0.24,0.329-0.613,0.538-1.121,0.628
|
||||
c-1.076,0.09-2.421,0.135-4.035,0.135h-1.345v2.062h0.583c0.628-0.09,3.377-0.135,8.25-0.135c4.872,0,7.622,0.045,8.25,0.135h0.583
|
||||
v-2.062h-1.345c-1.614,0-2.959-0.045-4.035-0.135c-0.509-0.09-0.882-0.298-1.121-0.628V15.461c0-8.279,0.015-12.449,0.045-12.509
|
||||
c0.09-0.269,0.216-0.426,0.381-0.471c0.164-0.045,0.59-0.067,1.278-0.067h1.211c1.674,0,2.825,0.075,3.452,0.224
|
||||
c1.136,0.329,1.957,0.807,2.466,1.435c0.747,0.867,1.225,2.75,1.435,5.649c0.06,0.598,0.104,0.957,0.135,1.076v0.269h1.793v-0.269
|
||||
c0-0.06-0.134-1.763-0.404-5.111c-0.269-3.347-0.419-5.051-0.448-5.111V0.306H40.394v0.269c0,0.06-0.135,1.764-0.404,5.111
|
||||
c-0.269,3.348-0.419,5.052-0.448,5.111V11.067z"/>
|
||||
<path fill="white" d="M100.003,30.66v-2.062h-0.359c-0.658-0.06-1.226-0.254-1.704-0.583c-0.478-0.329-0.717-0.702-0.717-1.121
|
||||
c0-0.209,0.015-0.329,0.045-0.359c0.029-0.09,1.031-1.629,3.004-4.618c0.448-0.687,0.836-1.293,1.166-1.816
|
||||
c0.329-0.523,0.605-0.956,0.829-1.3c0.224-0.343,0.411-0.62,0.56-0.829c0.149-0.209,0.254-0.343,0.314-0.404l0.135-0.135
|
||||
l1.659,2.556c1.105,1.704,2.197,3.408,3.273,5.111c1.076,1.704,1.614,2.6,1.614,2.69c0,0.209-0.314,0.397-0.942,0.56
|
||||
c-0.628,0.165-1.196,0.247-1.704,0.247h-0.269v2.062h0.493c0.687-0.09,2.869-0.135,6.546-0.135c3.318,0,5.201,0.045,5.649,0.135
|
||||
H120v-2.062h-1.39c-1.166-0.029-1.958-0.09-2.376-0.179c-0.419-0.09-0.747-0.269-0.986-0.538c-0.09-0.09-1.667-2.526-4.73-7.308
|
||||
c-3.064-4.782-4.596-7.203-4.596-7.263c0-0.029,0.986-1.584,2.959-4.663c2.092-3.139,3.183-4.753,3.273-4.842
|
||||
c1.016-1.046,2.75-1.614,5.201-1.704h0.762V0.037h-0.359c-0.359,0.09-2.003,0.135-4.932,0.135c-3.468,0-5.396-0.045-5.784-0.135
|
||||
h-0.404v2.062h0.359c0.926,0.09,1.614,0.389,2.062,0.897c0.388,0.389,0.493,0.747,0.314,1.076c0,0.03-0.778,1.248-2.331,3.654
|
||||
c-1.555,2.406-2.347,3.609-2.376,3.609c-0.06,0-0.979-1.397-2.757-4.192c-1.779-2.795-2.668-4.237-2.668-4.327
|
||||
c0.06-0.149,0.404-0.306,1.031-0.471c0.628-0.164,1.195-0.247,1.704-0.247h0.224V0.037h-0.493c-0.658,0.09-2.84,0.135-6.546,0.135
|
||||
c-3.318,0-5.201-0.045-5.649-0.135h-0.404v2.062h0.897h0.628c1.614,0,2.69,0.224,3.228,0.673c0.09,0.09,1.464,2.212,4.125,6.367
|
||||
c2.66,4.155,3.99,6.262,3.99,6.322c0,0.03-1.188,1.868-3.564,5.515c-2.376,3.647-3.625,5.56-3.744,5.739
|
||||
c-0.957,1.166-2.765,1.793-5.425,1.883H88.48v2.062h0.359c0.359-0.09,2.002-0.135,4.932-0.135c3.467,0,5.395,0.045,5.784,0.135
|
||||
H100.003z"/>
|
||||
<path fill="white" d="M37.736,15.499h-3.429c-2.264,0-3.396-0.011-3.396-0.034l1.715-5.077l1.681-5.043l0.672,1.984
|
||||
c0.493,1.435,1.064,3.127,1.715,5.077L37.736,15.499z M31.583,24.072v-1.547h-0.168c-0.493,0-0.958-0.095-1.395-0.286
|
||||
c-0.437-0.19-0.723-0.431-0.857-0.723c-0.067-0.089-0.101-0.19-0.101-0.303c0-0.134,0.224-0.863,0.672-2.185l0.672-1.984h7.834
|
||||
l0.807,2.387c0.538,1.614,0.807,2.443,0.807,2.488c0,0.403-0.785,0.605-2.353,0.605h-0.437v1.547h0.336
|
||||
c0.336-0.067,1.95-0.101,4.841-0.101c2.51,0,3.934,0.034,4.27,0.101h0.303v-1.547h-1.009c-1.166-0.022-1.872-0.146-2.118-0.37
|
||||
c-0.09-0.089-0.168-0.202-0.235-0.336c-0.516-1.591-1.855-5.581-4.018-11.969c-2.163-6.388-3.256-9.593-3.278-9.616
|
||||
C36.066,0.101,35.797,0.023,35.348,0h-0.303c-0.359,0-0.572,0.09-0.639,0.269c-0.023,0.023-0.611,1.754-1.765,5.194
|
||||
c-1.155,3.441-2.315,6.892-3.48,10.355c-1.166,3.463-1.76,5.228-1.782,5.295c-0.449,0.874-1.479,1.345-3.093,1.412h-0.504v1.547
|
||||
h0.235c0.269-0.067,1.401-0.101,3.396-0.101c2.174,0,3.463,0.034,3.866,0.101H31.583z"/>
|
||||
<path fill="white" d="M68.318,37.806c-0.299,0.299-0.591,0.478-0.874,0.538c-0.284,0.06-1.039,0.105-2.264,0.135H63.7v2.062h26.229v-0.135
|
||||
c0.06-0.09,0.381-2.085,0.964-5.986c0.583-3.901,0.889-5.896,0.919-5.986v-0.135h-1.793v0.135c-0.03,0.06-0.105,0.464-0.224,1.211
|
||||
c-0.269,1.793-0.613,3.244-1.031,4.349c-0.509,1.375-1.248,2.399-2.219,3.071c-0.972,0.673-2.324,1.114-4.058,1.323
|
||||
c-0.419,0.03-1.973,0.045-4.663,0.045h-2.287c-1.375,0-2.152-0.074-2.331-0.224c-0.09-0.06-0.15-0.164-0.179-0.314
|
||||
c-0.03-0.06-0.045-2.107-0.045-6.142v-6.008h2.421c1.943,0.03,3.139,0.12,3.587,0.269c0.836,0.24,1.405,0.666,1.704,1.278
|
||||
c0.298,0.613,0.478,1.547,0.538,2.802v0.897h1.793V18.437h-1.793v0.897c-0.06,1.255-0.24,2.19-0.538,2.802
|
||||
c-0.299,0.613-0.867,1.039-1.704,1.278c-0.448,0.15-1.644,0.24-3.587,0.269h-2.421v-5.425c0-3.646,0.015-5.499,0.045-5.56
|
||||
c0.09-0.298,0.269-0.463,0.538-0.493c0.239-0.06,1.853-0.09,4.842-0.09c1.733,0,2.75,0.015,3.049,0.045
|
||||
c2.451,0.15,4.177,0.74,5.179,1.771c1.001,1.031,1.681,2.952,2.04,5.761c0.06,0.538,0.104,0.852,0.135,0.942v0.179h1.793v-0.179
|
||||
c0-0.029-0.209-1.763-0.628-5.201l-0.628-5.201v-0.179H63.7v2.062h1.48c1.225,0.03,1.98,0.075,2.264,0.135
|
||||
c0.284,0.06,0.575,0.24,0.874,0.538V37.806z"/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 6.9 KiB |
BIN
website/static/img/khan-academy.png
Normal file
BIN
website/static/img/khan-academy.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.3 KiB |
BIN
website/static/img/og_logo.png
Normal file
BIN
website/static/img/og_logo.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 24 KiB |
32
website/static/js/index.js
Normal file
32
website/static/js/index.js
Normal file
@@ -0,0 +1,32 @@
|
||||
window.startup = function() {
|
||||
var tex = document.getElementsByClassName("tex");
|
||||
Array.prototype.forEach.call(tex, function(el) {
|
||||
katex.render(el.getAttribute("data-expr"), el);
|
||||
});
|
||||
|
||||
var demoInput = document.getElementById("demo-input");
|
||||
var demoOutput = document.getElementById("demo-output");
|
||||
|
||||
function doDemo() {
|
||||
try {
|
||||
katex.render(demoInput.value, demoOutput, {
|
||||
displayMode: true
|
||||
});
|
||||
} catch(err) {
|
||||
while(demoOutput.lastChild) {
|
||||
demoOutput.removeChild(demoOutput.lastChild);
|
||||
}
|
||||
var msg = document.createTextNode(err.message);
|
||||
var span = document.createElement("span");
|
||||
span.appendChild(msg);
|
||||
demoOutput.appendChild(span);
|
||||
span.setAttribute("class", "errorMessage");
|
||||
}
|
||||
}
|
||||
|
||||
demoInput.addEventListener("input", function() {
|
||||
doDemo();
|
||||
});
|
||||
|
||||
doDemo();
|
||||
};
|
212
website/static/static/index.css
Normal file
212
website/static/static/index.css
Normal file
@@ -0,0 +1,212 @@
|
||||
body {
|
||||
font: 16px/1.4 "proxima-nova", "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
margin: 0 auto;
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
.header, .footer {
|
||||
color: #fff;
|
||||
background: #329894;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cta {
|
||||
margin: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cta a {
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
margin: 0 10px;
|
||||
padding: 8px 24px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 40px 0 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
color: #fff;
|
||||
font-size: 45px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tagline em {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.header .cta a {
|
||||
border: 3px solid;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.header .cta a:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.demo {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||
font-size: 22px;
|
||||
margin: 50px 0 0;
|
||||
}
|
||||
|
||||
.demo,
|
||||
.demo-left,
|
||||
.demo-right {
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
.demo-left,
|
||||
.demo-right {
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
padding: 20px 30px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.demo-instructions {
|
||||
line-height: 1.5;
|
||||
margin-bottom: 10px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.demo-left {
|
||||
background: #444;
|
||||
}
|
||||
|
||||
.demo-left textarea {
|
||||
background: #000;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
font: 14px Menlo, monospace;
|
||||
height: 160px;
|
||||
padding: 10px;
|
||||
resize: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.demo-right {
|
||||
background: #fff;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
#demo-output {
|
||||
font-size: 18px;
|
||||
padding: 10px 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.main {
|
||||
background: #fff2e7;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||
min-height: 400px;
|
||||
position: relative;
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.subtagline {
|
||||
color: #329894;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.features {
|
||||
font-size: 20px;
|
||||
margin: 0 auto;
|
||||
width: 540px;
|
||||
}
|
||||
|
||||
.features > li {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.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(../../img/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: 50px;
|
||||
}
|
||||
|
||||
.main .cta a {
|
||||
border: 3px solid;
|
||||
color: #329894;
|
||||
}
|
||||
|
||||
.main .cta a:hover {
|
||||
background: rgba(50, 152, 148, 0.1);
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 30px 0;
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.ka-logo {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.ka-logo img {
|
||||
border: none;
|
||||
vertical-align: -1px;
|
||||
}
|
||||
|
||||
.credits {
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.credits a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
color: red;
|
||||
}
|
Reference in New Issue
Block a user