patrick/KaTeX
1
0
Fork 0
mirror of https://github.com/Smaug123/KaTeX synced 2025-10-05 19:28:39 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
49f84f76e7a39c5b3e53ccfb7b29f8d4757d83c1
KaTeX/docs/browser.md
ylemkimon 49f84f76e7 v0.10.0 release (#1751) 
* Remove RC-versioned docs

* Release v0.10.0

Bump master to v0.10.1-pre

* Fix multiple occuring hash replacement

* Update SRI hashes

* Update CHANGELOG.md

* Fix tags not shown

* Update docusaurus

* Wrap escaping backslashes with backticks

* Update SRI hashes

* Update CHANGELOG.md
2018-10-29 13:14:24 +09:00

3.7 KiB
Raw Blame History

id, title
id title
browser Browser

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

CDN (Content Delivery Network)

Use CDN to deliver KaTeX to your project:

<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.

ECMAScript module is also available:

<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 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 require 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.