Add Extensions to Libraries documentation, dedupe auto-render documentation (#1566)

* Add extensions to libs.md

* Remove documentations from auto-render/README.md

* Add colons
This commit is contained in:
ylemkimon
2018-08-09 00:28:45 +09:00
committed by Erik Demaine
parent 5ce03c45cf
commit ed7ad8d116
2 changed files with 24 additions and 105 deletions

View File

@@ -4,97 +4,5 @@ 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>
```
See [index.html](index.html) for an example.
(To run this example from a clone of the repository, run `yarn start`
in the root KaTeX directory, and then visit
http://localhost:7936/contrib/auto-render/index.html
with your web browser.)
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`.
See [Auto-render extension documentation](https://khan.github.io/KaTeX/docs/autorender.html)
for more information.

View File

@@ -1,22 +1,33 @@
---
id: libs
title: Libraries
title: Extensions & Libraries
---
## Angular2+
- [ng-katex](https://github.com/garciparedes/ng-katex) Angular module to write beautiful math expressions with TeX syntax boosted by KaTeX library
## Extensions
## 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
These extensions are provided by KaTeX.
## Ruby
- [Auto-render](autorender.md): Automatically renders all of the math inside text
- [Copy-tex](https://github.com/Khan/KaTeX/tree/master/contrib/copy-tex): When selecting and copying KaTeX-rendered elements, copies their LaTeX source to the clipboard
- [`math/tex` Custom Script Type](https://github.com/Khan/KaTeX/tree/master/contrib/mathtex-script-type): Automatically displays LaTeX math inside `script` tags with `type=math/tex`
- [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).
## Libraries
## AsciiMath
These libraries are maintained by third-parties.
### 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
- [asciimath2tex](https://github.com/christianp/asciimath2tex): Converts AsciiMath to TeX, with KaTeX in mind