Files
KaTeX/test/screenshotter/test.html
ylemkimon 5f32b71c85 Use webpack to build files and webpack-dev-server for testing (#1068)
* 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
2018-01-21 19:48:25 -05:00

71 lines
2.1 KiB
HTML

<!doctype html>
<html>
<head>
<title>Screenshotter test</title>
<script src="../../katex.js" type="text/javascript"></script>
<style type="text/css">
#math, #pre, #post {
font-size: 4em;
}
body {
font-family: "DejaVu Serif",serif;
}
@font-face {
font-family: "Mincho";
src: url("unicode-fonts/mincho/font_1_honokamin.ttf") format("truetype");
}
@font-face {
font-family: "Batang";
src: url("unicode-fonts/batang/batang.ttf") format("truetype");
}
.katex .cjk_fallback {
font-family: "Mincho",serif;
}
.katex .hangul_fallback {
font-family: "Batang",serif;
}
</style>
</head>
<body>
<span id="pre"></span>
<span id="math"></span>
<span id="post"></span>
<script type="text/javascript">
function handle_search_string(search, callback) {
var query = {};
var re = /(?:^\?|&)([^&=]+)(?:=([^&]+))?/g;
var match;
while (match = re.exec(search)) {
query[match[1]] = decodeURIComponent(match[2]);
}
var mathNode = document.getElementById("math");
var settings = {
displayMode: !!query["display"],
throwOnError: !query["noThrow"]
};
if (query["errorColor"]) {
settings.errorColor = query["errorColor"];
}
var macros = {};
var macroRegex = /(?:^\?|&)(?:\\|%5[Cc])([A-Za-z]+)=([^&]*)/g;
while ((match = macroRegex.exec(search)) !== null) {
settings.macros = macros;
macros["\\" + match[1]] = decodeURIComponent(match[2]);
}
katex.render(query["tex"], mathNode, settings);
document.getElementById("pre").innerHTML = query["pre"] || "";
document.getElementById("post").innerHTML = query["post"] || "";
if (callback && document.fonts && document.fonts.ready) {
document.fonts.ready.then(callback);
} else if (callback) {
callback();
}
}
handle_search_string(window.location.search);
</script>
</body>
</html>