patrick/KaTeX
1
0
Fork 0
mirror of https://github.com/Smaug123/KaTeX synced 2025-10-08 04:28:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve examples, add defer, async, and pre- loading KaTeX (#1580)

Browse Source 
* Wrap `katex.render` examples with try...catch

* Add starter template with defer in README.md

* Update documentation to use `defer` and `onload`

* Add documentation on async and pre loading KaTeX

* Use sha384 for SRI

* Revise wording according to comments

* Minor changes

* Fix article
This commit is contained in:
ylemkimon
2018-08-11 09:21:36 +09:00
committed by GitHub
parent b99de9ae68
commit ea1a226e20
5 changed files with 131 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
README.md
View File

@@ -20,56 +20,63 @@ Try out KaTeX [on the demo page](https://khan.github.io/KaTeX/#demo)!
## Getting started ## Getting started
[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: ### Starter template
```html ```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"> <!DOCTYPE html>
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.js" integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm" crossorigin="anonymous"></script> <!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
``` <html>
<head>
<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">
#### In-browser rendering <!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.js" integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm" crossorigin="anonymous"></script>
Call `katex.render` with a TeX expression and a DOM element to render into: <!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/contrib/auto-render.min.js" integrity="sha384-aGfk5kvhIq5x1x5YdvCp4upKZYnA8ckafviDpmWEKp4afOZEqOli7gqSnh8I6enH" crossorigin="anonymous"
```js onload="renderMathInElement(document.body);"></script>
katex.render("c = \\pm\\sqrt{a^2 + b^2}", element); </head>
```
If KaTeX can't parse the expression, it throws a `katex.ParseError` error.
#### Rendering expressions in text elements
To automatically render math in text elements, include the [auto-render script](https://khan.github.io/KaTeX/docs/autorender.html) `contrib/auto-render.min.js`, or via CDN:
```html
<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 `renderMathInElement` function with a DOM element containing expressions in a script tag before the closing body tag:
```html
<body>
... ...
<script> </html>
renderMathInElement(document.body);
</script>
</body>
``` ```
See [Auto-render Extension](https://khan.github.io/KaTeX/docs/autorender.html) for more details. You can also [download KaTeX](https://github.com/khan/katex/releases) and host it yourself.
#### Server side rendering or rendering to a string For details on how to configure auto-render extension, refer to [the documentation](https://khan.github.io/KaTeX/docs/autorender.html).
To generate HTML on the server or to generate an HTML string of the rendered math, you can use `katex.renderToString`: ### API
Call `katex.render` to render a TeX expression directly into a DOM element.
For example:
```js ```js
var html = katex.renderToString("c = \\pm\\sqrt{a^2 + b^2}"); katex.render("c = \\pm\\sqrt{a^2 + b^2}", element, {
throwOnError: false
});
```
Call `katex.renderToString` to generate an HTML string of the rendered math,
e.g., for server-side rendering. For example:
```js
var html = katex.renderToString("c = \\pm\\sqrt{a^2 + b^2}", {
throwOnError: false
});
// '<span class="katex">...</span>' // '<span class="katex">...</span>'
``` ```
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. Make sure to include the CSS and font files in both cases.
If you are doing all rendering on the server, there is no need to include the
JavaScript on the client.
## Documentation The examples above use the `throwOnError: false` option, which renders invalid
inputs as the TeX source code in red (by default), with the error message as
hover text. For other available options, see the
[API documentation](https://khan.github.io/KaTeX/docs/api.html),
[options documentation](https://khan.github.io/KaTeX/docs/options.html), and
[handling errors documentation](https://khan.github.io/KaTeX/docs/error.html).
## Demo and Documentation
Learn more about using KaTeX [on the website](https://khan.github.io/KaTeX)! Learn more about using KaTeX [on the website](https://khan.github.io/KaTeX)!

29
docs/api.md
View File

@@ -6,23 +6,38 @@ title: API
Call `katex.render` with a TeX expression and a DOM element to render into: Call `katex.render` with a TeX expression and a DOM element to render into:
```js ```js
katex.render("c = \\pm\\sqrt{a^2 + b^2}", element); katex.render("c = \\pm\\sqrt{a^2 + b^2}", element, {
throwOnError: false
});
``` ```
To avoid escaping the backslash (double backslash), you can use 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) [`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): (but beware that `${`, `\u` and `\x` may still need escaping):
```js ```js
katex.render(String.raw`c = \pm\sqrt{a^2 + b^2}`, element); katex.render(String.raw`c = \pm\sqrt{a^2 + b^2}`, element, {
throwOnError: false
});
``` ```
If KaTeX can't parse the expression, it throws a `katex.ParseError` by default. ## Server-side rendering or rendering to a string
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`: To generate HTML on the server or to generate an HTML string of the rendered math, you can use `katex.renderToString`:
```js ```js
var html = katex.renderToString("c = \\pm\\sqrt{a^2 + b^2}"); var html = katex.renderToString("c = \\pm\\sqrt{a^2 + b^2}", {
throwOnError: false
});
// '<span class="katex">...</span>' // '<span class="katex">...</span>'
``` ```
## Handling errors
The examples above use the `throwOnError: false` option, which renders invalid
inputs as the TeX source code in red (by default), with the error message as
hover text. Without this option, invalid LaTeX will cause a
`katex.ParseError` exception to be thrown. See [handling errors](error.md).
## Configuring KaTeX
The last argument to `katex.render` and `katex.renderToString` can contain
[a variety of rendering options](options.md).

46
docs/autorender.md
View File

@@ -13,36 +13,34 @@ using a CDN:
```html ```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"> <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 defer 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> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/contrib/auto-render.min.js" integrity="sha384-aGfk5kvhIq5x1x5YdvCp4upKZYnA8ckafviDpmWEKp4afOZEqOli7gqSnh8I6enH" crossorigin="anonymous"
onload="renderMathInElement(document.body);"></script>
``` ```
Then, call the exposed `renderMathInElement` function in a script tag > Above, the [`defer` attribute](https://developer.mozilla.org/en/HTML/Element/script#Attributes)
before the close body tag: indicates that the script doesn't need to execute until the page has loaded,
speeding up page rendering; and the `onload` attribute calls
`renderMathInElement` once the auto-render script loads.
Alternatively, you can call the `renderMathInElement` when (or after) the
[`DOMContentLoaded` event](https://developer.mozilla.org/ko/docs/Web/Reference/Events/DOMContentLoaded)
fires on the document or in another deferred script.
This approach is useful for specifying or computing options, or if you don't
want to use a `defer` or `onload` attribute.
For example:
```html ```html
<body> <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 defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.js" integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm" crossorigin="anonymous"></script>
<script> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/contrib/auto-render.min.js" integrity="sha384-aGfk5kvhIq5x1x5YdvCp4upKZYnA8ckafviDpmWEKp4afOZEqOli7gqSnh8I6enH" crossorigin="anonymous"></script>
renderMathInElement(document.body); <script>
</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() { document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(document.body); renderMathInElement(document.body, {
// ...options...
});
}); });
</script> </script>
...
</head>
``` ```
## API ## API

25
docs/browser.md
View File

@@ -8,17 +8,34 @@ title: Browser
Use CDN to deliver KaTeX to your project: Use CDN to deliver KaTeX to your project:
```html ```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="sha384-GKjjJq+BptvsN7uDut3YEUCJNQqLcbrWDgch98tdIg0WC9crSIPIdyaG3SjurHDQ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.css" integrity="sha256-T4bfkilI7rlQXG1R8kqn+FGhe56FhZmqmp9x75Lw4s8=" crossorigin="anonymous"> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.js" integrity="sha384-omQnemkEC7UFlIZ175SaCJSWuRHhTjsVtJqXKshMhaJ7OLmAaWmbgLU5TrGGQISk" crossorigin="anonymous"></script>
``` ```
KaTeX also provides minified versions: KaTeX also provides minified versions:
```html ```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="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH" crossorigin="anonymous">
<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"> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.js" integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm" crossorigin="anonymous"></script>
``` ```
> The loading of scripts are [deferred using `defer` attribute](https://developer.mozilla.org/en/HTML/Element/script#Attributes)
to speed up page rendering. The `katex` object will be available after
[`DOMContentLoaded` event is fired on the `document`](https://developer.mozilla.org/ko/docs/Web/Reference/Events/DOMContentLoaded).
If you do not use `defer`, `katex` object will be available after corresponding
`script` tag.
> If KaTeX is not used immediately or not critical, it is possible to load KaTeX
asynchronously. Add [`async` attribute](https://developer.mozilla.org/en/HTML/Element/script#Attributes)
to `script` and use [`rel="preload"` and `onload` attribute](https://github.com/filamentgroup/loadCSS)
on `link`.
> You can prefetch KaTeX fonts to prevent FOUT or FOIT. Use [Web Font Loader](https://github.com/typekit/webfontloader)
or add [`<link rel="preload" href=(path to WOFF2 font) as="font" type="font/woff2" crossorigin="anonymous">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content)
to `head`. (Note that only few browsers [support `rel="preload"`](https://caniuse.com/#feat=link-rel-preload)
and they all support WOFF2 so preloading WOFF2 fonts is enough.) You can use
Chrome DevTools Network panel or similar to find out which fonts are used.
## Download & Host Things Yourself ## Download & Host Things Yourself
Download a [KaTeX release](https://github.com/Khan/KaTeX/releases), Download a [KaTeX release](https://github.com/Khan/KaTeX/releases),
copy `katex.js`, `katex.css` copy `katex.js`, `katex.css`

31
docs/error.md
View File

@@ -3,15 +3,32 @@ id: error
title: Handling Errors title: Handling Errors
--- ---
If KaTeX encounters an error (invalid or unsupported LaTeX) and `throwOnError` 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 hasn't been set to `false`, then `katex.render` and `katex.renderToString`
`katex.ParseError`. The message in this error includes some of the LaTeX will throw an exception of type `katex.ParseError`.
source code, so needs to be escaped if you want to render it to HTML. 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. For example:
```js
try {
var html = katex.renderToString(texString);
// '<span class="katex">...</span>'
} catch (e) {
if (e instanceof katex.ParseError) {
// KaTeX can't parse the expression
html = ("Error in LaTeX '" + texString + "': " + e.message)
.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
} else {
throw e; // other error
}
}
```
In particular, you should convert `&`, `<`, `>` characters to In particular, you should convert `&`, `<`, `>` characters to
`&amp;`, `&lt;`, `&gt;` (e.g., using `_.escape`) `&amp;`, `&lt;`, `&gt;` before including either LaTeX source code or
before including either LaTeX source code or exception messages in your exception messages in your HTML/DOM.
HTML/DOM. (Failure to escape in this way makes a `<script>` injection (This can also be done using `_.escape`.)
attack possible if your LaTeX source is untrusted.) 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 Alternatively, you can set `throwOnError` to `false` to use built-in behavior
of rendering the LaTeX source code with hover text stating the error. of rendering the LaTeX source code with hover text stating the error.