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:
ylemkimon
2018-07-27 12:19:40 +09:00
committed by Kevin Barabash
parent 83e8eac0a5
commit 8a38035855
28 changed files with 1838 additions and 122 deletions

7
.gitignore vendored
View File

@@ -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
View File

@@ -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
`&amp;`, `&lt;`, `&gt;` (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
View 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
View 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
View 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
View 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
View 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
`&amp;`, `&lt;`, `&gt;` (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
View 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
View 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
View 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
View 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
View 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
View 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
View 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>&nbsp;&nbsp;&nbsp;`a & b \\`<br>&nbsp;&nbsp;&nbsp;`c & d`<br>`\end{matrix}` |$\begin{array}{cc}a & b\\c & d\end{array}$ | `\begin{array}{cc}`<br>&nbsp;&nbsp;&nbsp;`a & b \\`<br>&nbsp;&nbsp;&nbsp;`c & d`<br>`\end{array}`
|$\begin{pmatrix} a & b \\ c & d \end{pmatrix}$ |`\begin{pmatrix}`<br>&nbsp;&nbsp;&nbsp;`a & b \\`<br>&nbsp;&nbsp;&nbsp;`c & d`<br>`\end{pmatrix}` |$\begin{bmatrix} a & b \\ c & d \end{bmatrix}$ | `\begin{bmatrix}`<br>&nbsp;&nbsp;&nbsp;`a & b \\`<br>&nbsp;&nbsp;&nbsp;`c & d`<br>`\end{bmatrix}`
|$\begin{vmatrix} a & b \\ c & d \end{vmatrix}$ |`\begin{vmatrix}`<br>&nbsp;&nbsp;&nbsp;`a & b \\`<br>&nbsp;&nbsp;&nbsp;`c & d`<br>`\end{vmatrix}` |$\begin{Vmatrix} a & b \\ c & d \end{Vmatrix}$ |`\begin{Vmatrix}`<br>&nbsp;&nbsp;&nbsp;`a & b \\`<br>&nbsp;&nbsp;&nbsp;`c & d`<br>`\end{Vmatrix}`
|$\begin{Bmatrix} a & b \\ c & d \end{Bmatrix}$ |`\begin{Bmatrix}`<br>&nbsp;&nbsp;&nbsp;`a & b \\`<br>&nbsp;&nbsp;&nbsp;`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>&nbsp;&nbsp;&nbsp;`\begin{array}{c:c:c}`<br>&nbsp;&nbsp;&nbsp;`a & b & c \\ \hline`<br>&nbsp;&nbsp;&nbsp;`d & e & f \\`<br>&nbsp;&nbsp;&nbsp;`\hdashline`<br>&nbsp;&nbsp;&nbsp;`g & h & i`<br>`\end{array}`
|$\begin{aligned} a&=b+c \\ d+e&=f \end{aligned}$ |`\begin{aligned}`<br>&nbsp;&nbsp;&nbsp;`a&=b+c \\`<br>&nbsp;&nbsp;&nbsp;`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>&nbsp;&nbsp;&nbsp;`10&x+ &3&y = 2 \\`<br>&nbsp;&nbsp;&nbsp;` 3&x+&13&y = 4`<br>`\end{alignedat}`
|$\begin{gathered} a=b \\ e=b+c \end{gathered}$ |`\begin{gathered}`<br>&nbsp;&nbsp;&nbsp;`a=b \\ `<br>&nbsp;&nbsp;&nbsp;`e=b+c`<br>`\end{gathered}`|$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$ |`x = \begin{cases}`<br>&nbsp;&nbsp;&nbsp;`a &\text{if } b \\`<br>&nbsp;&nbsp;&nbsp;`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 hexa­decimal 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
View 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
View 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
View 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
View 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&rsquo;t need to reflow the page.</li>
<li><b>Print quality:</b> KaTeX&rsquo;s layout is based on Donald Knuth&rsquo;s TeX, the gold standard for math typesetting.</li>
<li><b>Self contained:</b> KaTeX has no dependencies and can easily be bundled with your website resources.</li>
<li><b>Server side rendering:</b> KaTeX produces the same output regardless of browser or environment, so you can pre-render expressions using Node.js and send them as plain HTML.</li>
</ul>
<div class="examples">
<div class="example tex" data-expr="\displaystyle \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }"></div>
<div class="example tex" data-expr="\displaystyle \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)"></div>
<div class="example tex" data-expr="\displaystyle 1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \quad\quad \text{for }\lvert q\rvert<1."></div>
</div>
<div class="subtagline">
Lightning-fast, even on pages with hundreds of expressions:
</div>
<div class="comparison-labels">
<div class="left tex" data-expr="\KaTeX"></div>
<div class="right">MathJax</div>
</div>
<div class="comparison"></div>
<div class="cta">
<a href="docs/node.html" role="button"><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
View 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
View 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
View 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;

View 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) {
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 667 KiB

View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

View 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();
};

View 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;
}