mirror of
https://github.com/Smaug123/KaTeX
synced 2025-10-08 04:28:41 +00:00
Release v0.11.1 (#2098)
* Release v0.11.1 Bump master to v0.12.0-pre * Update CHANGELOG.md for v0.11.1-release * Update CHANGELOG.md with Changes section for v0.11.1-release
This commit is contained in:
Michael Polyak
GitHub
111
website/versioned_docs/version-0.11.1/autorender.md
Normal file
111
website/versioned_docs/version-0.11.1/autorender.md
Normal file
@@ -0,0 +1,111 @@
|
||||
---
|
||||
id: version-0.11.1-autorender
|
||||
title: Auto-render Extension
|
||||
original_id: autorender
|
||||
---
|
||||
This is an extension to automatically render all of the math inside of text. It
|
||||
searches all of the text nodes within a given element for the given delimiters,
|
||||
ignoring certain tags like `<pre>`, 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.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"
|
||||
onload="renderMathInElement(document.body);"></script>
|
||||
```
|
||||
|
||||
> Above, the [`defer` attribute](https://developer.mozilla.org/en/HTML/Element/script#Attributes)
|
||||
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
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
renderMathInElement(document.body, {
|
||||
// ...options...
|
||||
});
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
ECMAScript module is also available:
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
|
||||
<script type="module">
|
||||
import renderMathInElement from "https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.mjs";
|
||||
renderMathInElement(document.body);
|
||||
</script>
|
||||
```
|
||||
|
||||
> You can use [`nomodule` attribute](https://developer.mozilla.org/en/HTML/Element/script#Attributes)
|
||||
to provide a fallback for older browsers that do not support ES modules. -->
|
||||
|
||||
## 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/KaTeX/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"]`.
|
||||
|
||||
- `ignoredClasses`: This is a list of DOM node class names to ignore when
|
||||
recursing through. By default, this value is not set.
|
||||
|
||||
- `errorCallback`: A callback method returning a message and an error stack
|
||||
in case of an critical error during rendering. The default uses `console.error`.
|
||||
|
||||
- `preProcess`: A callback function, `(math: string) => string`, used to process
|
||||
math expressions before rendering.
|
||||
|
||||
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`.
|
||||
119
website/versioned_docs/version-0.11.1/browser.md
Normal file
119
website/versioned_docs/version-0.11.1/browser.md
Normal file
@@ -0,0 +1,119 @@
|
||||
---
|
||||
id: version-0.11.1-browser
|
||||
title: Browser
|
||||
original_id: browser
|
||||
---
|
||||
> KaTeX supports all major browsers, including Chrome, Safari, Firefox, Opera, Edge, and IE 9–11.
|
||||
|
||||
## Starter template
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<!-- 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.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
|
||||
|
||||
<!-- The loading of KaTeX is deferred to speed up page rendering -->
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- To automatically render math in text elements, include the auto-render extension: -->
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"
|
||||
onload="renderMathInElement(document.body);"></script>
|
||||
</head>
|
||||
...
|
||||
</html>
|
||||
```
|
||||
|
||||
## Loading as Global
|
||||
If you include the `katex.js` directly, the `katex` object will be available as
|
||||
a global variable.
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.css" integrity="sha384-bsHo4/LA+lkZv61JspMDQB9QP1TtO4IgOf2yYS+J6VdAYLVyx1c3XKcsHh0Vy8Ws" crossorigin="anonymous">
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.js" integrity="sha384-4z8mjH4yIpuK9dIQGR1JwbrfYsStrNK6MP+2Enhue4eyo0XlBDXOIPc8b6ZU0ajz" crossorigin="anonymous"></script>
|
||||
```
|
||||
|
||||
KaTeX also provides minified versions:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
|
||||
```
|
||||
|
||||
The examples above load the script [deferred using the `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 the 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 [Font Loading API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API)
|
||||
or [Web Font Loader](https://github.com/typekit/webfontloader):
|
||||
|
||||
```html
|
||||
<script>
|
||||
window.WebFontConfig = {
|
||||
custom: {
|
||||
families: ['KaTeX_AMS', 'KaTeX_Caligraphic:n4,n7', 'KaTeX_Fraktur:n4,n7',
|
||||
'KaTeX_Main:n4,n7,i4,i7', 'KaTeX_Math:i4,i7', 'KaTeX_Script',
|
||||
'KaTeX_SansSerif:n4,n7,i4', 'KaTeX_Size1', 'KaTeX_Size2', 'KaTeX_Size3',
|
||||
'KaTeX_Size4', 'KaTeX_Typewriter'],
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/webfontloader@1.6.28/webfontloader.js" integrity="sha256-4O4pS1SH31ZqrSO2A/2QJTVjTPqVe+jnYgOWUVr7EEc=" crossorigin="anonymous"></script>
|
||||
```
|
||||
|
||||
You can also use [`rel="preload"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content).
|
||||
Add `<link rel="preload" href=(path to WOFF2 font) as="font" type="font/woff2" crossorigin="anonymous">`
|
||||
to `head`. Note that [only few browsers support it](https://caniuse.com/#feat=link-rel-preload)
|
||||
and they all support WOFF2 so preloading WOFF2 fonts is enough.
|
||||
|
||||
See [Google Web Fundamentals - Web Font Optimization](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization)
|
||||
for more detail.
|
||||
|
||||
## Module Loaders
|
||||
### AMD
|
||||
```html
|
||||
<script type="text/javascript">
|
||||
require([
|
||||
"https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.js",
|
||||
], katex => {
|
||||
...
|
||||
});
|
||||
</script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.css" integrity="sha384-bsHo4/LA+lkZv61JspMDQB9QP1TtO4IgOf2yYS+J6VdAYLVyx1c3XKcsHh0Vy8Ws" crossorigin="anonymous">
|
||||
```
|
||||
|
||||
### ECMAScript module
|
||||
```html
|
||||
<script type="module" type="text/javascript">
|
||||
import katex from 'https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.mjs';
|
||||
...
|
||||
</script>
|
||||
<script nomodule defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.js" integrity="sha384-4z8mjH4yIpuK9dIQGR1JwbrfYsStrNK6MP+2Enhue4eyo0XlBDXOIPc8b6ZU0ajz" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.css" integrity="sha384-bsHo4/LA+lkZv61JspMDQB9QP1TtO4IgOf2yYS+J6VdAYLVyx1c3XKcsHh0Vy8Ws" crossorigin="anonymous">
|
||||
```
|
||||
|
||||
> Use [`nomodule` attribute](https://developer.mozilla.org/en/HTML/Element/script#Attributes)
|
||||
to provide a fallback for older browsers that do not support ES modules.
|
||||
|
||||
## Download & Host Things Yourself
|
||||
Download a [KaTeX release](https://github.com/KaTeX/KaTeX/releases),
|
||||
copy `katex.js`, `katex.css`
|
||||
(or `katex.min.js` and `katex.min.css` to use minified versions),
|
||||
and the `fonts` directory, and include or import it like above.
|
||||
|
||||
You can also build from source. See [Building from Source](node.md#building-from-source)
|
||||
for more details.
|
||||
|
||||
## Bundler
|
||||
[Use Node.js package managers to install KaTeX and import it](node.md) 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.
|
||||
@@ -1,4 +1,5 @@
|
||||
[
|
||||
"0.11.1",
|
||||
"0.11.0",
|
||||
"0.10.2",
|
||||
"0.10.1",
|
||||
|
||||
Reference in New Issue
Block a user