Skip to content

Latest commit

 

History

History
118 lines (98 loc) · 5.85 KB

browser.md

File metadata and controls

118 lines (98 loc) · 5.85 KB
Raw
id title
browser
Browser

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

Starter template

<!DOCTYPE html>
<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.1/dist/katex.min.css" integrity="sha384-pe7s+HmY6KvqRkrRRUr4alQJ0SkmzCft3RpK1ttGMa7qk8Abp/MEa/4wgceRHloO" crossorigin="anonymous">

    <!-- The loading of KaTeX is deferred to speed up page rendering -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.1/dist/katex.min.js" integrity="sha384-YYpuPYVAiGj+ZojhNMsgPOEZqjDxPzaUxsIHRgIda7sbl1uLOwzlHW9lGXMcorkx" crossorigin="anonymous"></script>

    <!-- To automatically render math in text elements, include the auto-render extension: -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.1/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"
        onload="renderMathInElement(document.body);"></script>
  </head>
  ...
</html>

Loading as 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.16.1/dist/katex.css" integrity="sha384-qczADvRNoex1o8TiNs0/3dcNPcXQ+AddvoSjrS7DHLFOGv/5IVv0Y3dMAb70s6rD" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.1/dist/katex.js" integrity="sha384-y2XWpIK4xcw2qDud8xRfWDD06XzgZPNg1l8GUndt4lhnvHHKONzzO2Nts7ymOe/7" crossorigin="anonymous"></script>

KaTeX also provides minified versions:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.1/dist/katex.min.css" integrity="sha384-pe7s+HmY6KvqRkrRRUr4alQJ0SkmzCft3RpK1ttGMa7qk8Abp/MEa/4wgceRHloO" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.1/dist/katex.min.js" integrity="sha384-YYpuPYVAiGj+ZojhNMsgPOEZqjDxPzaUxsIHRgIda7sbl1uLOwzlHW9lGXMcorkx" crossorigin="anonymous"></script>

The examples above load the script deferred using the 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 the 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 Font Loading API or Web Font Loader:

<script>
  window.WebFontConfig = {
    custom: {
      families: ['KaTeX_AMS', 'KaTeX_Caligraphic:n4,n7', 'KaTeX_Fraktur:n4,n7',
        'KaTeX_Main:n4,n7,i4,i7', 'KaTeX_Math:i4,i7', 'KaTeX_Script',
        'KaTeX_SansSerif:n4,n7,i4', 'KaTeX_Size1', 'KaTeX_Size2', 'KaTeX_Size3',
        'KaTeX_Size4', 'KaTeX_Typewriter'],
    },
  };
</script>
<script defer src="https://cdn.jsdelivr.net/npm/webfontloader@1.6.28/webfontloader.js" integrity="sha256-4O4pS1SH31ZqrSO2A/2QJTVjTPqVe+jnYgOWUVr7EEc=" crossorigin="anonymous"></script>

You can also use rel="preload". Add <link rel="preload" href=(path to WOFF2 font) as="font" type="font/woff2" crossorigin="anonymous"> to head. Note that only few browsers support it and they all support WOFF2 so preloading WOFF2 fonts is enough.

See Google Web Fundamentals - Web Font Optimization for more detail.

Module Loaders

AMD

<script type="text/javascript">
    require([
        "https://cdn.jsdelivr.net/npm/katex@0.16.1/dist/katex.js",
    ], katex => {
        ...
    });
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.1/dist/katex.css" integrity="sha384-qczADvRNoex1o8TiNs0/3dcNPcXQ+AddvoSjrS7DHLFOGv/5IVv0Y3dMAb70s6rD" crossorigin="anonymous">

ECMAScript module

<script type="module" type="text/javascript">
    import katex from 'https://cdn.jsdelivr.net/npm/katex@0.16.1/dist/katex.mjs';
    ...
</script>
<script nomodule defer src="https://cdn.jsdelivr.net/npm/katex@0.16.1/dist/katex.js" integrity="sha384-y2XWpIK4xcw2qDud8xRfWDD06XzgZPNg1l8GUndt4lhnvHHKONzzO2Nts7ymOe/7" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.1/dist/katex.css" integrity="sha384-qczADvRNoex1o8TiNs0/3dcNPcXQ+AddvoSjrS7DHLFOGv/5IVv0Y3dMAb70s6rD" 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.