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
3.3 KiB
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:
<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:
<body>
...
<script>
renderMathInElement(document.body);
</script>
</body>
See 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>):
<head>
...
<script>
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(document.body);
});
</script>
...
</head>
API
This extension exposes a single function, window.renderMathInElement, with
the following API:
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,
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:
[ {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 usesconsole.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.