docs(v2): New doc page for math equations (#4821)

* New doc page for math equations

* improve math equations doc

Co-authored-by: slorber <lorber.sebastien@gmail.com>

website/docs/guides/markdown-features/markdown-features-math-equations.mdx

@@ -0,0 +1,119 @@
+---
+id: math-equations
+title: Math Equations
+description: Writing LaTeX Math Equations
+slug: /markdown-features/math-equations
+---
+
+Mathematical equations can be rendered using [KaTeX](https://katex.org).
+
+## Usage
+
+Please read [KaTeX](https://katex.org) documentation for more details.
+
+### Inline
+
+Write inline math equations by wrapping LaTeX equations between `$`:
+
+```mdx
+Let $f:[a,b] \to \R$ be Riemann integrable. Let $F:[a,b]\to\R$ be $F(x)=
+\int_{a}^{x}f(t)dt$. Then $$F$$ is continuous, and at all $x$ such that $f$ is continuous at $x$, $F$ is differentiable at $x$ with $F'(x)=f(x)$.
+```
+
+Let $f:[a,b] \to \R$ be Riemann integrable. Let $F:[a,b]\to\R$ be $F(x)=
+\int_{a}^{x}f(t)dt$. Then $F$ is continuous, and at all $x$ such that $f$ is continuous at $x$, $F$ is differentiable at $x$ with $F'(x)=f(x)$.
+
+### Blocks
+
+For equation block or display mode, use line breaks and `$$`:
+
+```mdx
+$$
+I = \int_0^{2\pi} \sin(x) dx
+$$
+```
+
+$$
+I = \int_0^{2\pi} \sin(x) dx
+$$
+
+## Configuration
+
+To enable KaTeX, you need to install `remark-math` and `rehype-katex` plugins.
+
+```bash npm2yarn
+npm install --save remark-math@3 rehype-katex@4 hast-util-is-element@1.1.0
+```
+
+:::caution
+
+Use the exact same versions. The latest versions are incompatible with Docusaurus 2.
+
+:::
+
+Import the plugins in `docusaurus.config.js`:
+
+```js
+const math = require('remark-math');
+const katex = require('rehype-katex');
+```
+
+Add them to your content plugin or preset options (usually `@docusaurus/preset-classic` docs options):
+
+```js
+remarkPlugins: [math],
+rehypePlugins: [katex],
+```
+
+Include the KaTeX CSS in your config under `stylesheets`:
+
+```js
+stylesheets: [
+    {
+        href: "https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css",
+        type: "text/css",
+        integrity: "sha384-Um5gpz1odJg5Z4HAmzPtgZKdTBHZdw8S29IecapCSB31ligYPhHQZMIlWLYQGVoc",
+        crossorigin: "anonymous",
+    },
+],
+```
+
+Overall the changes look like:
+
+```diff title="docusaurus.config.js"
+// highlight-start
++ const math = require('remark-math');
++ const katex = require('rehype-katex');
+// highlight-end
+
+
+module.exports = {
+  title: 'Docusaurus',
+  tagline: 'Build optimized websites quickly, focus on your content',
+  presets: [
+    [
+      '@docusaurus/preset-classic',
+      {
+        docs: {
+          path: 'docs',
+          // highlight-start
++         remarkPlugins: [math],
++         rehypePlugins: [katex],
+          // highlight-end
+        },
+      },
+    ],
+  ],
+  // highlight-start
++ stylesheets: [
++   {
++     href: 'https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css',
++     type: 'text/css',
++     integrity:
++       'sha384-Um5gpz1odJg5Z4HAmzPtgZKdTBHZdw8S29IecapCSB31ligYPhHQZMIlWLYQGVoc',
++     crossorigin: 'anonymous',
++   },
++ ],
+  // highlight-end
+};
+```