mirror of
https://github.com/Smaug123/KaTeX
synced 2025-10-10 21:48:41 +00:00
5f32b71c85
* Create a separate entry point for webpack
Created a webpack entry point for KaTeX, which imports katex.less. As
flow[1] and jest[2] doesn't support CSS modules natively, a separate
entry point is used and it is not flowtyped.
[1] https://gist.github.com/lambdahands/d19e0da96285b749f0ef
[2] https://facebook.github.io/jest/docs/en/webpack.html
* Use webpack to build files
* Made webpack.config.js export valid webpack configuration
* Use:
browserify -> webpack
babelify -> babel-loader
UglifyJS CLI -> UglifyJsPlugin
Less CLI -> less-loader
cleancss -> cssnano in css-loader
build/fonts -> file-loader
* Inline CSS(Less) using style-loader and export them using
ExtractTextPlugin
* Add `watch` npm script calling `webpack --watch`
* Improve local testing(webpack-dev-server)
* Made webpackDevServer export a valid webpack configuration
* Compile Less and inline CSS using less-loader and style-loader
* Instead of copying files serve files from /static and use file-loader
* Remove old server.js and its dependencies
* Use webpack-dev-server in Screenshotter
* Include contrib in webpack-dev-server
+ Moved common configurations to webpack.common.js
* Rename webpackDevServer.js to webpack.dev...
to be consistent, avoid confusion with webpack-dev-server and follow
webpack configuration naming convention.
* Remove unnecessary conditional output.path
* Use map instead of reduce
+ Add comments regarding function arguments
* Remove unnecessary mkdir and clean build/* before build
* Use katex as external dependency instead of global variable in contrib
Fixes #692.
* Unblock codes as they are built as a module
* Update package-lock.json
* Add comments regarding devServer option
* Lint renamed webpack.dev.js
a0d8b33
* Export ES6 module and expose its default export
* Revert "Browserify hotfix (#1057)"
This reverts commit f6b509123b.
* Enables colors on the console when running the dev server in Screenshotter
* Add context to webpack configuration
Allows webpack to be run from other directories
* Move `rm -rf build/*` to npm scripts
* Check dependencies before build
* Move UglifyJsPlugin into config creation
* Let webpack handle ES6 modules
Do not transform modules to commonjs in Babel. However Jest doesn't not
support ES6 modules, so transfrom modules to commonjs when NODE_ENV is
`test`.
* Add documentation on testing in IE 9 and 10 using webpack-dev-server
Changed version range to include IE-compatible version
97 lines
3.3 KiB
Markdown
97 lines
3.3 KiB
Markdown
# 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://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0-beta/katex.min.css" integrity="sha384-L/SNYu0HM7XECWBeshTGLluQO9uVI1tvkCtunuoUbCHHoTH76cDyXty69Bb9I0qZ" crossorigin="anonymous">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0-beta/katex.min.js" integrity="sha384-ad+n9lzhJjYgO67lARKETJH6WuQVDDlRfj81AJJSswMyMkXTD49wBj5EP004WOY6" crossorigin="anonymous"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0-beta/contrib/auto-render.min.js" integrity="sha384-EkJr57fExjeMKAZnlVBuoBoX0EJ4BiDPiAd/JyTzIA65ORu4hna7V6aaq4zsUvJ2" 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 `npm 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: true},
|
|
{left: "\\(", right: "\\)", display: false}
|
|
]
|
|
```
|
|
|
|
- `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`.
|
|
|
|
Note that 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.
|