Suggest <!DOCTYPE html> in documentation (#2052)

* Suggest <!DOCTYPE html> in documentation

Inspired by #2047

* Add starter template

* Mention <iframe>s

* Set default docs page to Browser
This commit is contained in:
Erik Demaine
2019-07-24 10:17:41 -04:00
committed by ylemkimon
parent 285c9fe0b6
commit d82d09bebd
5 changed files with 31 additions and 6 deletions

View File

@@ -4,7 +4,27 @@ title: Browser
--- ---
> KaTeX supports all major browsers, including Chrome, Safari, Firefox, Opera, Edge, and IE 911. > KaTeX supports all major browsers, including Chrome, Safari, Firefox, Opera, Edge, and IE 911.
## Global ## Starter template
```html
<!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.10.2/dist/katex.min.css" integrity="sha384-yFRtMMDnQtDRO8rLpMIKrtPCD5jdktao2TV19YiZYWMDkUR5GQZR/NOVTdquEx1j" crossorigin="anonymous">
<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.js" integrity="sha384-9Nhn55MVVN0/4OFx7EE5kpFBPsEMZxKTCnA+4fqDmg12eCTqGi6+BB2LjY8brQxJ" 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.10.2/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" 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 If you include the `katex.js` directly, the `katex` object will be available as
a global variable. a global variable.
@@ -20,10 +40,10 @@ KaTeX also provides minified versions:
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.js" integrity="sha384-9Nhn55MVVN0/4OFx7EE5kpFBPsEMZxKTCnA+4fqDmg12eCTqGi6+BB2LjY8brQxJ" crossorigin="anonymous"></script> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.js" integrity="sha384-9Nhn55MVVN0/4OFx7EE5kpFBPsEMZxKTCnA+4fqDmg12eCTqGi6+BB2LjY8brQxJ" crossorigin="anonymous"></script>
``` ```
The loading of scripts are [deferred using `defer` attribute](https://developer.mozilla.org/en/HTML/Element/script#Attributes) The examples above load the script [deferred using the `defer` attribute](https://developer.mozilla.org/en/HTML/Element/script#Attributes)
to speed up page rendering. The `katex` object will be available after to speed up page rendering. The `katex` object will be available after
[`DOMContentLoaded` event is fired on the `document`](https://developer.mozilla.org/ko/docs/Web/Reference/Events/DOMContentLoaded). [`DOMContentLoaded` event is fired on the `document`](https://developer.mozilla.org/ko/docs/Web/Reference/Events/DOMContentLoaded).
If you do not use `defer`, `katex` object will be available after corresponding If you do not use `defer`, `katex` object will be available after the corresponding
`script` tag. `script` tag.
If KaTeX is not used immediately or not critical, it is possible to load KaTeX If KaTeX is not used immediately or not critical, it is possible to load KaTeX

View File

@@ -2,6 +2,11 @@
id: issues id: issues
title: Common Issues title: Common Issues
--- ---
- Be sure to include `<!DOCTYPE html>` at the top of your HTML file, as
otherwise your browser will render in "[quirks mode](https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)"
which can cause KaTeX to sometimes render incorrectly.
This header is needed even inside `<iframe>`s
(which don't inherit the parent document's doctype).
- Many Markdown preprocessors, such as the one that Jekyll and GitHub Pages use, - Many Markdown preprocessors, such as the one that Jekyll and GitHub Pages use,
have a "smart quotes" feature. This changes `'` to `` which is an issue for have a "smart quotes" feature. This changes `'` to `` which is an issue for
math containing primes, e.g. `f'`. This can be worked around by defining a math containing primes, e.g. `f'`. This can be worked around by defining a

View File

@@ -40,7 +40,7 @@
The <em>fastest</em> math typesetting library for the web. The <em>fastest</em> math typesetting library for the web.
</div> </div>
<div class="cta"> <div class="cta">
<a href="docs/node.html" role="button"> <a href="docs/browser.html" role="button">
<svg class="svg-inline--fa fa-download fa-w-16" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path></svg> <svg class="svg-inline--fa fa-download fa-w-16" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path></svg>
Installation Installation
</a> </a>

View File

@@ -135,7 +135,7 @@ const siteConfig = {
// Used for publishing and more // Used for publishing and more
projectName: 'KaTeX', projectName: 'KaTeX',
organizationName: 'Khan', organizationName: 'KaTeX',
headerLinks: [ headerLinks: [
{href: '/#demo', label: 'Try'}, {href: '/#demo', label: 'Try'},

View File

@@ -3,6 +3,6 @@ https://katex.netlify.com/* https://katex.org/:splat 301!
/function-support.html /docs/supported.html 301 /function-support.html /docs/supported.html 301
/docs/en/* /docs/:splat 301 /docs/en/* /docs/:splat 301
/docs /docs/node.html 301 /docs /docs/browser.html 301
/* /404.html 404 /* /404.html 404