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.
## 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
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>
```
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
[`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.
If KaTeX is not used immediately or not critical, it is possible to load KaTeX

View File

@@ -2,6 +2,11 @@
id: 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,
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

View File

@@ -40,7 +40,7 @@
The <em>fastest</em> math typesetting library for the web.
</div>
<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>
Installation
</a>

View File

@@ -135,7 +135,7 @@ const siteConfig = {
// Used for publishing and more
projectName: 'KaTeX',
organizationName: 'Khan',
organizationName: 'KaTeX',
headerLinks: [
{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
/docs/en/* /docs/:splat 301
/docs /docs/node.html 301
/docs /docs/browser.html 301
/* /404.html 404