emily/KaTeX_mirror: This is a mirror of https://github.com/Khan/KaTeX and for own development.

id: browser

title: Browser

KaTeX supports all major browsers, including Chrome, Safari, Firefox, Opera, Edge, and IE 9–11.

Global

If you include the katex.js directly, the katex object will be available as a global variable.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.css" integrity="sha384-xNwWFq3SIvM4dq/1RUyWumk8nj/0KFg4TOnNcfzUU4X2gNn3WoRML69gO7waf3xh" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.js" integrity="sha384-UP7zD+aGyuDvxWQEDSRYcvoTxJSD82C6VvuEBktJZGo25CVhDstY9sCDHvyceo9L" crossorigin="anonymous"></script>

KaTeX also provides minified versions:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.min.css" integrity="sha384-9eLZqc9ds8eNjO3TmqPeYcDj8n+Qfa4nuSiGYa6DjLNcv9BtN69ZIulL9+8CqC9Y" crossorigin="anonymous">
<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 to speed up page rendering. The katex object will be available after DOMContentLoaded event is fired on the document. 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 asynchronously. Add async attribute to script and use rel="preload" and onload attribute on link.

You can prefetch KaTeX fonts to prevent FOUT or FOIT. Use Web Font Loader or add <link rel="preload" href=(path to WOFF2 font) as="font" type="font/woff2" crossorigin="anonymous"> to head. (Note that only few browsers support 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.

Module Loaders

AMD

<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

<script type="module" type="text/javascript">
    import katex from 'https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.mjs';
    ...
</script>
<script nomodule defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.js" integrity="sha384-UP7zD+aGyuDvxWQEDSRYcvoTxJSD82C6VvuEBktJZGo25CVhDstY9sCDHvyceo9L" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.css" integrity="sha384-xNwWFq3SIvM4dq/1RUyWumk8nj/0KFg4TOnNcfzUU4X2gNn3WoRML69gO7waf3xh" crossorigin="anonymous">

Use nomodule attribute to provide a fallback for older browsers that do not support ES modules.

Download & Host Things Yourself

Download a KaTeX release, 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 for more details.

Bundler

Use Node.js package managers to install KaTeX and import it in your project. Then bundle using bundlers like webpack or rollup.js. Note that you have to bundle the stylesheet (katex.css) or include it manually.

browser.md 4.1 KB Permalink History Raw