Copypasta to help edit this site

Frontmatter​

Full example with everything you'll ever need:

sidebar_label: Home
sidebar_class_name: hidden
sidebar_position: 1

title: "Home"
hide_title: true
hide_table_of_contents: true

pagination_next: null
pagination_prev: null

slug: /foo/bar

Math​

This is the resource for all LaTeX things.

Used KaTeX, here's a reference. Not sure how do to macros. You can inline between two $ like $P(x) = \frac{1}{\sigma \sqrt{2\pi}} e^{-\frac{(x - \mu)^2}{2\sigma^2}}$ or you can make them blocks.

$$
P(x) = \frac{1}{\sigma \sqrt{2\pi}} e^{-\frac{(x - \mu)^2}{2\sigma^2}}
$$

If you use just one $, the equation will be aligned left. Here's the Binomial Distribution:

$
y = \frac{n!}{k!(n-k)!}p^k q^{n-k} = \binom{n}{k}p^k q^{n-k}
$

Neato.

Pages​

Pages do not have sidebars, only "docs" do.

import React from 'react';
import Layout from '@theme/Layout';

export default function Page() {
  return (
    <Layout>
      <h1>My React page</h1>
      <p>This is a React page</p>
    </Layout>
  );
}

A new page is now available at http://localhost:3000/my-react-page.

Code​

Giant example with title, line numbers, line highlights, etc

```tsx title="src/pages/my-react-page.tsx" showLineNumbers {6-9}
import React from 'react';
import Layout from '@theme/Layout';

export default function Page() {
  return (
    <Layout>
      <h1>My React page</h1>
      <p>This is a React page</p>
    </Layout>
  );
}
```

import React from 'react';
import Layout from '@theme/Layout';

export default function Page() {
  return (
    <Layout>
      <h1>My React page</h1>
      <p>This is a React page</p>
    </Layout>
  );
}

You can also use // highlight-start and // highlight-end (with the comment syntax appropriate for your language) too.

Images​

They either refer to stuff in static or can be relative. Use the latter to neatly colocate images pertinent to your document. Easy-peasy.

![Image Alt Text](/img/foo.png)
![Image Alt Text](../img/foo.png)

Linking Internally​

Easier to link directly to a Markdown or other file. These will be resolved during build.

This is [a link to an internal document](../docs/foo/bar.md)

Tabs​

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
  <TabItem value="apple" label="Apple" default>
    This is an apple 🍎
  </TabItem>
  <TabItem value="orange" label="Orange">
    This is an orange 🍊
  </TabItem>
  <TabItem value="banana" label="Banana">
    This is a banana 🍌
  </TabItem>
</Tabs>

Admonitions​

There are note tip info warning and danger. For example,

:::note
Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
:::

This is what they look like:

MDX and Interaction​

You can totally use MDX for all sorts of client-side shenanigans.

MDX can make your documentation more interactive and allows using any React components inside Markdown:

export const Highlight = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: '20px',
      color: '#fff',
      padding: '10px',
      cursor: 'pointer',
    }}
    onClick={() => {
      alert(`You clicked the color ${color} with label ${children}`)
    }}>
    {children}
  </span>
);

This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !

This is <Highlight color="#1877F2">Facebook blue</Highlight> !

This is Green! and this is Blue.

Badges​

import Badge from "@site/components/Badge"

<Badge color="primary">Primary</Badge>
<Badge color="secondary">Secondary</Badge>
<Badge color="success">Success</Badge>
<Badge color="info">Info</Badge>
<Badge color="warning">Warning</Badge>
<Badge color="danger">Danger</Badge>

Mermaid​

Here's a flowchart reference.