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

Add documentation regarding importing the module (#1768)

Browse Source
This commit is contained in:
ylemkimon
2018-11-06 00:37:44 +09:00
committed by GitHub
parent f713f324bd
commit cda184bea4
4 changed files with 106 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
docs/browser.md
View File

@@ -4,8 +4,9 @@ title: Browser
---
> KaTeX supports all major browsers, including Chrome, Safari, Firefox, Opera, Edge, and IE 9–11.
## CDN (Content Delivery Network)
Use CDN to deliver KaTeX to your project:
## 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.10.0/dist/katex.css" integrity="sha384-xNwWFq3SIvM4dq/1RUyWumk8nj/0KFg4TOnNcfzUU4X2gNn3WoRML69gO7waf3xh" crossorigin="anonymous">
@@ -19,25 +20,37 @@ KaTeX also provides minified versions:
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.min.js" integrity="sha384-K3vbOmF2BtaVai+Qk37uypf7VrgBubhQreNQe9aGsz9lB63dIFiQVlJbr92dw2Lx" crossorigin="anonymous"></script>
```
> The loading of scripts are [deferred using `defer` attribute](https://developer.mozilla.org/en/HTML/Element/script#Attributes)
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
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)
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.
ECMAScript module is also available:
## Module Loaders
### AMD
```html
<script type="text/javascript">
require([
"https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.js",
], katex => {
...
});
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.css" integrity="sha384-xNwWFq3SIvM4dq/1RUyWumk8nj/0KFg4TOnNcfzUU4X2gNn3WoRML69gO7waf3xh" crossorigin="anonymous">
```
### ECMAScript module
```html
<script type="module" type="text/javascript">
import katex from 'https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.mjs';
@@ -54,13 +67,13 @@ to provide a fallback for older browsers that do not support ES modules.
Download a [KaTeX release](https://github.com/Khan/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 like above.
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](node.md) to install KaTeX and require it in your
[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.

36
docs/node.md
View File

@@ -2,7 +2,8 @@
id: node
title: Node.js
---
## npm
## Installation
### npm
Install with `npm`:
```bash
@@ -11,7 +12,7 @@ npm install katex
npm install -g katex
```
## Yarn
### Yarn
Install with `Yarn`:
```bash
@@ -20,8 +21,7 @@ yarn add katex
yarn global add katex
```
## Building from Source
### Building from Source
To build you will need Git, Node.js 6.9 or later, and Yarn.
Clone a copy of the GitHub source repository:
@@ -36,5 +36,33 @@ yarn
yarn build
```
If you'd like to use the built KaTeX in other projects, install the package by
specifying the path:
```bash
yarn add /path/to/KaTeX
# or using npm
npm install /path/to/KaTeX
```
> You can manually download the package and source code from
[GitHub releases](https://github.com/Khan/KaTeX/releases).
## Importing
KaTeX is exported as a CommonJS module, which can be imported using `require`:
```js
const katex = require('katex');
```
If you're using a module loader, transpiler, or bundler that supports interoperability
between ECMAScript module and CommonJS module, you can use `import`:
```js
import katex from 'katex';
```
KaTeX also provides an ECMAScript module:
```js
import katex from 'katex/dist/katex.mjs'
```
> The ES module contains ES6 syntaxes and features, and may need transpiling to
use in old environments:

29
website/versioned_docs/version-0.10.0/browser.md
View File

@@ -5,8 +5,9 @@ original_id: browser
---
> KaTeX supports all major browsers, including Chrome, Safari, Firefox, Opera, Edge, and IE 9–11.
## CDN (Content Delivery Network)
Use CDN to deliver KaTeX to your project:
## 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.10.0/dist/katex.css" integrity="sha384-xNwWFq3SIvM4dq/1RUyWumk8nj/0KFg4TOnNcfzUU4X2gNn3WoRML69gO7waf3xh" crossorigin="anonymous">
@@ -20,25 +21,37 @@ KaTeX also provides minified versions:
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.min.js" integrity="sha384-K3vbOmF2BtaVai+Qk37uypf7VrgBubhQreNQe9aGsz9lB63dIFiQVlJbr92dw2Lx" crossorigin="anonymous"></script>
```
> The loading of scripts are [deferred using `defer` attribute](https://developer.mozilla.org/en/HTML/Element/script#Attributes)
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
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)
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.
ECMAScript module is also available:
## Module Loaders
### AMD
```html
<script type="text/javascript">
require([
"https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.js",
], katex => {
...
});
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.css" integrity="sha384-xNwWFq3SIvM4dq/1RUyWumk8nj/0KFg4TOnNcfzUU4X2gNn3WoRML69gO7waf3xh" crossorigin="anonymous">
```
### ECMAScript module
```html
<script type="module" type="text/javascript">
import katex from 'https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.mjs';
@@ -55,13 +68,13 @@ to provide a fallback for older browsers that do not support ES modules.
Download a [KaTeX release](https://github.com/Khan/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 like above.
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](node.md) to install KaTeX and require it in your
[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.

36
website/versioned_docs/version-0.10.0/node.md
View File

@@ -3,7 +3,8 @@ id: version-0.10.0-node
title: Node.js
original_id: node
---
## npm
## Installation
### npm
Install with `npm`:
```bash
@@ -12,7 +13,7 @@ npm install katex
npm install -g katex
```
## Yarn
### Yarn
Install with `Yarn`:
```bash
@@ -21,8 +22,7 @@ yarn add katex
yarn global add katex
```
## Building from Source
### Building from Source
To build you will need Git, Node.js 6.9 or later, and Yarn.
Clone a copy of the GitHub source repository:
@@ -37,5 +37,33 @@ yarn
yarn build
```
If you'd like to use the built KaTeX in other projects, install the package by
specifying the path:
```bash
yarn add /path/to/KaTeX
# or using npm
npm install /path/to/KaTeX
```
> You can manually download the package and source code from
[GitHub releases](https://github.com/Khan/KaTeX/releases).
## Importing
KaTeX is exported as a CommonJS module, which can be imported using `require`:
```js
const katex = require('katex');
```
If you're using a module loader, transpiler, or bundler that supports interoperability
between ECMAScript module and CommonJS module, you can use `import`:
```js
import katex from 'katex';
```
KaTeX also provides an ECMAScript module:
```js
import katex from 'katex/dist/katex.mjs'
```
> The ES module contains ES6 syntaxes and features, and may need transpiling to
use in old environments: