# **notie** Tutorial

<div class="subtitle">

Updated for [v1.4](https://github.com/branyang02/notie).

</div>

## Using the `Notie` Component

### Getting Started

To start using **notie**, install the package via npm:

```bash
npm install notie-markdown
```

Then, import the `Notie` component in your React application:

```tsx
import { Notie } from "notie-markdown";

const markdown = `# Hello World

This is a Markdown content.`;

const Example = () => <Notie markdown={markdown} />;
```

The `Notie` component has the following props:

| Prop               | Type                          | Description                                                                                                |
| ------------------ | ----------------------------- | ---------------------------------------------------------------------------------------------------------- |
| `markdown`         | `string`                      | The Markdown content to be rendered.                                                                       |
| `config`           | `NotieConfig` (optional)      | Configuration options for Notie, including table of contents settings, font size, and theme customization. |
| `theme`            | `NotieThemes` (optional)      | Predefined theme option. Can be `default`, `default dark`, `Starlit Eclipse`, or `Starlit Eclipse Light`.  |
| `customComponents` | `CustomComponents` (optional) | Custom React components to be used for rendering specific elements in the markdown.                        |

Additionally, you can import the following types and interfaces from the `notie-markdown` package:

```tsx
import { Notie, sanitizeUrl, extractTableOfContents } from "notie-markdown";
import type {
  NotieProps,
  NotieConfig,
  NotieThemes,
  Theme,
  TocEntry,
  CustomComponents,
  CustomComponentProps,
  FullNotieConfig,
  FullTheme,
} from "notie-markdown";
```

- `sanitizeUrl` is the URL transform **notie** uses with react-markdown to block dangerous URL schemes (e.g. `javascript:`), exported for reuse.
- `extractTableOfContents` returns the table of contents of a markdown string as a `TocEntry[]` (`{ id, level, title }`).
- `CustomComponents` and `CustomComponentProps` describe the `customComponents` prop (see the _Using Custom Components in Markdown_ section below).
- `FullNotieConfig` and `FullTheme` are the fully-resolved (all fields required) versions of `NotieConfig` and `Theme` used internally by **notie**.

Notes:

- The `NotieConfig` interface allows for fine-grained control over various styling aspects, including colors, fonts, and component-specific styles. This is what `NotieConfig` looks like:

````tsx
interface NotieConfig {
  showTableOfContents?: boolean;
  previewEquations?: boolean;
  previewBlockquotes?: boolean;
  tocTitle?: string;
  fontSize?: CSSStyleDeclaration["fontSize"];
  /** Base URL of the code-runner service used by executable code blocks. */
  codeRunnerUrl?: string;
  /**
   * Desmos calculator API key used by ```desmos code blocks. Defaults to
   * the built-in demo key, which logs a warning that it is not licensed
   * for commercial use.
   */
  desmosApiKey?: string;
  theme?: Theme;
}
````

- The `Theme` interface within `NotieConfig` provides extensive customization options for appearance, colors, and component-specific styles.
- `NotieThemes` is a string union type that defines the available predefined themes.

<blockquote class="important">

`Theme` is the main interface for customizing the appearance of the `Notie` component. `NotieThemes` is a string union type that defines the available predefined themes.

</blockquote>

### Customizing the `Notie` Component

The `Notie` component provides a flexible way to customize the appearance of your Markdown-based content. You can easily adjust the colors for text, links, code blocks, and even specify different themes for static and live code blocks. Here's how you can customize the `Notie` component using a custom theme:

```tsx
import { Notie, Theme } from "notie-markdown";

const customTheme: Theme = {
  textColor: "#333", // Customize the text color
  linkColor: "#1a73e8", // Customize the link color
  codeColor: "#d73a49", // Customize the code color
  staticCodeTheme: "dracula", // Choose a theme for static code blocks
  liveCodeTheme: "xcodeDark", // Choose a theme for live code blocks
};

const App = () => {
  return (
    <Notie
      markdown={tutorialContent}
      config={{
        showTableOfContents: false, // Disable the Table of Contents
        theme: customTheme, // Apply the custom theme
      }}
    />
  );
};
```

### Using Custom Components in Markdown

`Notie` component takes in a `customComponents` prop that allows you to define custom React components to be used for rendering specific elements in the markdown. This can be useful for adding interactive elements in your file.

Let's insert a chart component from [MUI](https://mui.com/x/react-charts/) in our markdown file.

First, let's define the chart component:

```tsx
import { BarChart } from "@mui/x-charts/BarChart";

const MyChart = () => {
  return (
    <BarChart
      series={[
        { data: [35, 44, 24, 34] },
        { data: [51, 6, 49, 30] },
        { data: [15, 25, 30, 50] },
        { data: [60, 50, 15, 25] },
      ]}
      height={290}
      xAxis={[{ data: ["Q1", "Q2", "Q3", "Q4"], scaleType: "band" }]}
      margin={{ top: 10, bottom: 30, left: 40, right: 10 }}
    />
  );
};
```

Next, let's create a `customComponents` object that maps the component to a `string` key, in this case, `myChart`:

```tsx
const customComponents = {
  myChart: () => <MyChart />,
};
```

Finally, pass the `customComponents` object to the `Notie` component:

````tsx
import { Notie } from "notie-markdown";

const markdown = `
```component
{
  componentName: "myChart"
}
```
`;

const App = () => {
  const customComponents = {
    myChart: () => <MyChart />,
  };

  return <Notie markdown={markdown} customComponents={customComponents} />;
};
````

Let's also break down what you need to write in the markdown file. You need to include a code block with triple backticks and the `component` language identifier. Inside the code block, you need to provide a JSON object with the `componentName` key set to the key you defined in the `customComponents` object.

The `customComponents` prop is typed as `CustomComponents`, a map from `componentName` to a React component. Each component receives an optional `config` prop (see `CustomComponentProps`) containing the full parsed JSON object from the code block (including `componentName`), so you can pass extra configuration to your component directly from the markdown. Zero-prop components like `() => <MyChart />` above remain fully compatible — they simply ignore `config`.

```tsx
import type { CustomComponentProps, CustomComponents } from "notie-markdown";

const ConfiguredChart = ({ config }: CustomComponentProps) => (
  <MyChart height={(config?.height as number) ?? 290} />
);

const customComponents: CustomComponents = {
  myChart: ConfiguredChart,
};
```

````markdown
```component
{
componentName: "myChart"
}
```
````

Let's see what this looks like in the rendered markdown.

#### Custom Component Example

```component
{
componentName: "myChart"
}
```

That's it! You've successfully added a custom component to your markdown file.

## Markdown

**notie** supports most native markdown syntax. This tutorial provides an overview of the markdown syntax supported by **notie**.

### Title and headings

**notie** automatically generates the title and the table of contents based on the headings in your markdown file. **notie** support the following heading levels:

- `# Title`
- `## Heading 1`
- `### Heading 2`
- `#### Heading 3`
- `##### Heading 4`
- `###### Heading 5`

<blockquote class="note">

Only ATX headings (`#`, `##`, ...) are recognized by the table of contents, section splitting, and automatic heading numbering. Setext headings (underlined with `===` or `---`) still render as headings but are not listed in the TOC and are not numbered. Also note that theming is entirely prop-driven (`theme` / `config.theme`); **notie** does not auto-detect the user's `prefers-color-scheme` setting.

</blockquote>

### Paragraphs

To create paragraphs, use a blank line to separate one or more lines of text.

```markdown
This is a paragraph.

This is another paragraph.
```

This is a paragraph.

This is another paragraph.

### Emphasis

You can make text **bold** or _italic_ using the following syntax:

```markdown
**bold words**, _italic words_, **_bold and italic words_**, `code`
```

**bold words**, _italic words_, **_bold and italic words_**, `code`

### Lists

You can create ordered and unordered lists using the following syntax:

```markdown
- Unordered list item 1
  - Unordered list item 1.1
- Unordered list item 2
  - Unordered list item 2.1
  - Unordered list item 2.2
- Unordered list item 3
  - Unordered list item 3.1
    - Unordered list item 3.1.1
      - Unordered list item 3.1.1.1
```

- Unordered list item 1
  - Unordered list item 1.1
- Unordered list item 2
  - Unordered list item 2.1
  - Unordered list item 2.2
- Unordered list item 3
  - Unordered list item 3.1
    - Unordered list item 3.1.1
      - Unordered list item 3.1.1.1

```markdown
1. Ordered list item 1
2. Ordered list item 2
3. Ordered list item 3
```

1. Ordered list item 1
2. Ordered list item 2
3. Ordered list item 3

## Code Blocks

**notie** supports both static code blocks, and **live**, **editable**, and **runnable** code blocks.

### Static code blocks

To create a static code block, use triple backticks followed by the language name:

```python
def hello_world():
    print("Hello, World!")

hello_world()
```

```javascript
function helloWorld() {
  console.log("Hello, World!");
}

helloWorld();
```

### Live code blocks

To create a live code block, use `execute-[language]` after the triple backticks:

```execute-python
def hello_world():
    print("Hello, World!")

hello_world()
```

```execute-javascript
function helloWorld() {
  console.log("Hello, World!");
}

helloWorld();
```

For more information on supported languages, see the [Programming](https://notie-markdown.vercel.app/examples/programming) page.

<blockquote class="note">

Live code blocks send the code to a remote code-runner service when you click Run. The endpoint is configurable via `config.codeRunnerUrl`, so you can point it at infrastructure you control.

</blockquote>

#### Special Note for Python Support

**notie** additionally supports [PyTorch](https://pytorch.org/) and [Matplotlib](https://matplotlib.org/) for Python code blocks.

##### PyTorch

```execute-python
import torch

print(torch.__version__)
print(torch.cuda.is_available())

class NeuralNetwork(torch.nn.Module):
    def __init__(self):
        super(NeuralNetwork, self).__init__()
        self.linear = torch.nn.Linear(1, 1)

    def forward(self, x):
        return self.linear(x)

model = NeuralNetwork()
print(model)
```

##### Matplotlib

Users can use the pre-definied `get_image` function to display Matplotlib plots.

```execute-python
import matplotlib.pyplot as plt

# random data
x = [1, 2, 3, 4, 5]
y = [10, 20, 25, 30, 35]

plt.plot(x, y)
plt.xlabel('x')
plt.ylabel('y')
plt.title('Simple plot')
plt.grid(True)
plt.tight_layout()

get_image(plt)
```

## Math

**notie** uses [KaTeX](https://katex.org/) to render math equations. You can use the following syntax to write math equations:

### Inline Math

To write inline math equations, use the following syntax:

```markdown
The Pythagorean theorem is $a^2 + b^2 = c^2$.
```

The Pythagorean theorem is $a^2 + b^2 = c^2$.

### Block Math

To write block math equations, use the following syntax:

```markdown
Let $a$, $b$, and $c$ be the coefficients of a quadratic equation $ax^2 + bx + c = 0$. The solutions to this equation are given by the quadratic formula:

$$
\begin{equation*}
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
\end{equation*}
$$
```

Let $a$, $b$, and $c$ be the coefficients of a quadratic equation $ax^2 + bx + c = 0$. The solutions to this equation are given by the quadratic formula:

$$
\begin{equation*}
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
\end{equation*}
$$

```markdown
$$
\begin{align*}
ax^2 + bx + c &= 0 \\
x^2 + \frac{b}{a}x + \frac{c}{a} &= 0 \\
x^2 + \frac{b}{a}x &= -\frac{c}{a} \\
x^2 + \frac{b}{a}x + \left(\frac{b}{2a}\right)^2 &= -\frac{c}{a} + \left(\frac{b}{2a}\right)^2 \\
\left(x + \frac{b}{2a}\right)^2 &= \frac{b^2 - 4ac}{4a^2} \\
x + \frac{b}{2a} &= \pm \sqrt{\frac{b^2 - 4ac}{4a^2}} \\
x &= -\frac{b}{2a} \pm \sqrt{\frac{b^2 - 4ac}{4a^2}} \\
x &= \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
\end{align*}
$$
```

$$
\begin{align*}
ax^2 + bx + c &= 0 \\
x^2 + \frac{b}{a}x + \frac{c}{a} &= 0 \\
x^2 + \frac{b}{a}x &= -\frac{c}{a} \\
x^2 + \frac{b}{a}x + \left(\frac{b}{2a}\right)^2 &= -\frac{c}{a} + \left(\frac{b}{2a}\right)^2 \\
\left(x + \frac{b}{2a}\right)^2 &= \frac{b^2 - 4ac}{4a^2} \\
x + \frac{b}{2a} &= \pm \sqrt{\frac{b^2 - 4ac}{4a^2}} \\
x &= -\frac{b}{2a} \pm \sqrt{\frac{b^2 - 4ac}{4a^2}} \\
x &= \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
\end{align*}
$$

### Equation Numbering and Referencing

**notie** generates automatic equation numbering and referencing for the `\begin{equation}` and `\begin{align}` environments based on the current **section**. Display-math environments are only recognized when wrapped in `$$ ... $$` delimiters.

<blockquote class="definition">

A **section** in **notie** is anything under a heading level 2 (`##`). Any subsections under a heading level 3 (`###`) are considered part of the same section.

</blockquote>

For example, we are currently in the **Math** section, which is the third section in this markdown file. The first section is **Markdown**, and the second section is **Code Blocks**. Let's generate some equations and reference them.

```markdown
$$
\begin{equation}
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} \label{eq:quadratic}
\end{equation}
$$

Reference equation $\eqref{eq:quadratic}$ in the text.
```

$$
\begin{equation}
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} \label{eq:quadratic}
\end{equation}
$$

Reference equation $\eqref{eq:quadratic}$ in the text.

```markdown
$$
\begin{align}
ax^2 + bx + c &= 0 \label{eq:quadratic-general} \\
x^2 + \frac{b}{a}x + \frac{c}{a} &= 0 \label{eq:quadratic-normalized} \\
x^2 + \frac{b}{a}x &= -\frac{c}{a} \label{eq:quadratic-half} \\
x^2 + \frac{b}{a}x + \left(\frac{b}{2a}\right)^2 &= -\frac{c}{a} + \left(\frac{b}{2a}\right)^2 \label{eq:quadratic-complete} \\
\left(x + \frac{b}{2a}\right)^2 &= \frac{b^2 - 4ac}{4a^2} \label{eq:quadratic-squared} \\
x + \frac{b}{2a} &= \pm \sqrt{\frac{b^2 - 4ac}{4a^2}} \label{eq:quadratic-sqrt} \\
x &= -\frac{b}{2a} \pm \sqrt{\frac{b^2 - 4ac}{4a^2}} \label{eq:quadratic-solve} \\
x &= \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} \label{eq:quadratic-final}
\end{align}
$$

Reference equations $\eqref{eq:quadratic-general}$, $\eqref{eq:quadratic-normalized}$, $\eqref{eq:quadratic-half}$, $\eqref{eq:quadratic-complete}$, $\eqref{eq:quadratic-squared}$, $\eqref{eq:quadratic-sqrt}$, $\eqref{eq:quadratic-solve}$, and $\eqref{eq:quadratic-final}$ in the text.
```

$$
\begin{align}
ax^2 + bx + c &= 0 \label{eq:quadratic-general} \\
x^2 + \frac{b}{a}x + \frac{c}{a} &= 0 \label{eq:quadratic-normalized} \\
x^2 + \frac{b}{a}x &= -\frac{c}{a} \label{eq:quadratic-half} \\
x^2 + \frac{b}{a}x + \left(\frac{b}{2a}\right)^2 &= -\frac{c}{a} + \left(\frac{b}{2a}\right)^2 \label{eq:quadratic-complete} \\
\left(x + \frac{b}{2a}\right)^2 &= \frac{b^2 - 4ac}{4a^2} \label{eq:quadratic-squared} \\
x + \frac{b}{2a} &= \pm \sqrt{\frac{b^2 - 4ac}{4a^2}} \label{eq:quadratic-sqrt} \\
x &= -\frac{b}{2a} \pm \sqrt{\frac{b^2 - 4ac}{4a^2}} \label{eq:quadratic-solve} \\
x &= \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} \label{eq:quadratic-final}
\end{align}
$$

Reference equations $\eqref{eq:quadratic-general}$, $\eqref{eq:quadratic-normalized}$, $\eqref{eq:quadratic-half}$, $\eqref{eq:quadratic-complete}$, $\eqref{eq:quadratic-squared}$, $\eqref{eq:quadratic-sqrt}$, $\eqref{eq:quadratic-solve}$, and $\eqref{eq:quadratic-final}$ in the text.

## TikZ diagrams

You can create TikZ diagrams in your markdown file by including `tikz` after the triple backticks. For example,

````markdown
```tikz
\begin{document}

\begin{tikzpicture}[level/.style={sibling distance=60mm/#1}]
\node [circle,draw] (z){$n$}
  child {node [circle,draw] (a) {$\frac{n}{2}$}
    child {node [circle,draw] (b) {$\frac{n}{2^2}$}
      child {node {$\vdots$}
        child {node [circle,draw] (d) {$\frac{n}{2^k}$}}
        child {node [circle,draw] (e) {$\frac{n}{2^k}$}}
      }
      child {node {$\vdots$}}
    }
    child {node [circle,draw] (g) {$\frac{n}{2^2}$}
      child {node {$\vdots$}}
      child {node {$\vdots$}}
    }
  }
  child {node [circle,draw] (j) {$\frac{n}{2}$}
    child {node [circle,draw] (k) {$\frac{n}{2^2}$}
      child {node {$\vdots$}}
      child {node {$\vdots$}}
    }
  child {node [circle,draw] (l) {$\frac{n}{2^2}$}
    child {node {$\vdots$}}
    child {node (c){$\vdots$}
      child {node [circle,draw] (o) {$\frac{n}{2^k}$}}
      child {node [circle,draw] (p) {$\frac{n}{2^k}$}
        child [grow=right] {node (q) {$=$} edge from parent[draw=none]
          child [grow=right] {node (q) {$O_{k = \lg n}(n)$} edge from parent[draw=none]
            child [grow=up] {node (r) {$\vdots$} edge from parent[draw=none]
              child [grow=up] {node (s) {$O_2(n)$} edge from parent[draw=none]
                child [grow=up] {node (t) {$O_1(n)$} edge from parent[draw=none]
                  child [grow=up] {node (u) {$O_0(n)$} edge from parent[draw=none]}
                }
              }
            }
            child [grow=down] {node (v) {$O(n \cdot \lg n)$}edge from parent[draw=none]}
          }
        }
      }
    }
  }
};
\path (a) -- (j) node [midway] {+};
\path (b) -- (g) node [midway] {+};
\path (k) -- (l) node [midway] {+};
\path (k) -- (g) node [midway] {+};
\path (d) -- (e) node [midway] {+};
\path (o) -- (p) node [midway] {+};
\path (o) -- (e) node (x) [midway] {$\cdots$}
  child [grow=down] {
    node (y) {$O\left(\displaystyle\sum_{i = 0}^k 2^i \cdot \frac{n}{2^i}\right)$}
    edge from parent[draw=none]
  };
\path (q) -- (r) node [midway] {+};
\path (s) -- (r) node [midway] {+};
\path (s) -- (t) node [midway] {+};
\path (s) -- (l) node [midway] {=};
\path (t) -- (u) node [midway] {+};
\path (z) -- (u) node [midway] {=};
\path (j) -- (t) node [midway] {=};
\path (y) -- (x) node [midway] {$\Downarrow$};
\path (v) -- (y)
  node (w) [midway] {$O\left(\displaystyle\sum_{i = 0}^k n\right) = O(k \cdot n)$};
\path (q) -- (v) node [midway] {=};
\path (e) -- (x) node [midway] {+};
\path (o) -- (x) node [midway] {+};
\path (y) -- (w) node [midway] {$=$};
\path (v) -- (w) node [midway] {$\Leftrightarrow$};
\path (r) -- (c) node [midway] {$\cdots$};
\end{tikzpicture}
\end{document}
```
````

```tikz
\begin{document}

\begin{tikzpicture}[level/.style={sibling distance=60mm/#1}]
\node [circle,draw] (z){$n$}
  child {node [circle,draw] (a) {$\frac{n}{2}$}
    child {node [circle,draw] (b) {$\frac{n}{2^2}$}
      child {node {$\vdots$}
        child {node [circle,draw] (d) {$\frac{n}{2^k}$}}
        child {node [circle,draw] (e) {$\frac{n}{2^k}$}}
      }
      child {node {$\vdots$}}
    }
    child {node [circle,draw] (g) {$\frac{n}{2^2}$}
      child {node {$\vdots$}}
      child {node {$\vdots$}}
    }
  }
  child {node [circle,draw] (j) {$\frac{n}{2}$}
    child {node [circle,draw] (k) {$\frac{n}{2^2}$}
      child {node {$\vdots$}}
      child {node {$\vdots$}}
    }
  child {node [circle,draw] (l) {$\frac{n}{2^2}$}
    child {node {$\vdots$}}
    child {node (c){$\vdots$}
      child {node [circle,draw] (o) {$\frac{n}{2^k}$}}
      child {node [circle,draw] (p) {$\frac{n}{2^k}$}
        child [grow=right] {node (q) {$=$} edge from parent[draw=none]
          child [grow=right] {node (q) {$O_{k = \lg n}(n)$} edge from parent[draw=none]
            child [grow=up] {node (r) {$\vdots$} edge from parent[draw=none]
              child [grow=up] {node (s) {$O_2(n)$} edge from parent[draw=none]
                child [grow=up] {node (t) {$O_1(n)$} edge from parent[draw=none]
                  child [grow=up] {node (u) {$O_0(n)$} edge from parent[draw=none]}
                }
              }
            }
            child [grow=down] {node (v) {$O(n \cdot \lg n)$}edge from parent[draw=none]}
          }
        }
      }
    }
  }
};
\path (a) -- (j) node [midway] {+};
\path (b) -- (g) node [midway] {+};
\path (k) -- (l) node [midway] {+};
\path (k) -- (g) node [midway] {+};
\path (d) -- (e) node [midway] {+};
\path (o) -- (p) node [midway] {+};
\path (o) -- (e) node (x) [midway] {$\cdots$}
  child [grow=down] {
    node (y) {$O\left(\displaystyle\sum_{i = 0}^k 2^i \cdot \frac{n}{2^i}\right)$}
    edge from parent[draw=none]
  };
\path (q) -- (r) node [midway] {+};
\path (s) -- (r) node [midway] {+};
\path (s) -- (t) node [midway] {+};
\path (s) -- (l) node [midway] {=};
\path (t) -- (u) node [midway] {+};
\path (z) -- (u) node [midway] {=};
\path (j) -- (t) node [midway] {=};
\path (y) -- (x) node [midway] {$\Downarrow$};
\path (v) -- (y)
  node (w) [midway] {$O\left(\displaystyle\sum_{i = 0}^k n\right) = O(k \cdot n)$};
\path (q) -- (v) node [midway] {=};
\path (e) -- (x) node [midway] {+};
\path (o) -- (x) node [midway] {+};
\path (y) -- (w) node [midway] {$=$};
\path (v) -- (w) node [midway] {$\Leftrightarrow$};
\path (r) -- (c) node [midway] {$\cdots$};
\end{tikzpicture}
\end{document}
```

<div class="caption">

[Source](https://texample.net/tikz/examples/merge-sort-recursion-tree/)

</div>

Note that this uses an external library which requires an internet connection to render the diagram.

## Desmos Graphs

You can create Desmos graphs in your markdown file by including `desmos` after the triple backticks. For example,

````markdown
```desmos

y = \sin(x^2) + \frac{x^2}{10}
y=\frac{x^2}{4}-\frac{x}{3}+\frac{1}{2}+\frac{c_1}{x^2}

```
````

```desmos

y = \sin(x^2) + \frac{x^2}{10}
y=\frac{x^2}{4}-\frac{x}{3}+\frac{1}{2}+\frac{c_1}{x^2}


```

<blockquote class="note">

Desmos graphs are rendered with the Desmos calculator API, which requires an API key. By default **notie** uses the built-in Desmos demo key, which logs a console warning that it is not licensed for commercial use. Supply your own key via `config.desmosApiKey`.

</blockquote>

## Blockquotes

**notie** supports different types of blockquotes:

```markdown
<blockquote class="definition">

A **definition** is a statement that explains the meaning of a term.

</blockquote>
```

<blockquote class="definition">

A **definition** is a statement that explains the meaning of a term.

</blockquote>

You can use the following classes to create different types of blocks:

- `definition`
- `proof`
- `equation`
- `theorem`
- `lemma`
- `algorithm`
- `problem`
- `important`
- `note`

<blockquote class="proof">

A **proof** is a logical argument that demonstrates the truth of a statement.

</blockquote>

<blockquote class="equation">

$$
\begin{equation}
a^2 + b^2 = c^2
\end{equation}
$$

</blockquote>

<blockquote class="theorem">

**Theorem.** This is a theorem.

</blockquote>

<blockquote class="important">

**Important.** This is an important note.

</blockquote>

<blockquote class="lemma">

**Lemma.** This is a lemma.

</blockquote>

<blockquote class="algorithm">

**Algorithm.** This is an algorithm.

</blockquote>

<blockquote class="problem">

**Problem.** This is a problem.

</blockquote>

<blockquote class="note">

**Note.** This is a note.

</blockquote>

### Blockquote References

You can label a blockquote with an `id` attribute and reference it anywhere in the document using a `#bqref-` link. Supported types are `definition`, `theorem`, `lemma`, `algorithm`, `problem`, `proof`, `note`, and `important`.

```html
<blockquote class="definition" id="def:limit">
  A **limit** is the value that a function approaches as the input approaches
  some value.
</blockquote>

See [Definition](#bqref-def:limit) for the formal definition.
```

<blockquote class="definition" id="def:limit">

A **limit** is the value that a function approaches as the input approaches some value.

</blockquote>

See [Definition](#bqref-def:limit) for the formal definition. Hovering over the link shows a preview of the blockquote. Clicking navigates to it.

Theorems and lemmas share a counter within each section:

<blockquote class="theorem" id="thm:limit-uniqueness">

If a limit exists, it is unique.

</blockquote>

<blockquote class="lemma" id="lem:squeeze">

If $f(x) \leq g(x) \leq h(x)$ near $a$ and $\lim_{x \to a} f(x) = \lim_{x \to a} h(x) = L$, then $\lim_{x \to a} g(x) = L$.

</blockquote>

[Theorem](#bqref-thm:limit-uniqueness) guarantees uniqueness; [Lemma](#bqref-lem:squeeze) is useful for evaluating limits by comparison.

To disable hover previews, set `previewBlockquotes: false` in the config:

```tsx
<Notie markdown={markdown} config={{ previewBlockquotes: false }} />
```

## Collapsible Sections

You can create collapsible sections in your markdown file by using the following syntax:

```markdown
<details><summary>Click to expand!</summary>

This is a collapsible section. You can write markdown content here, such as:

$$
\begin{equation}
\int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
\end{equation}
$$

</details>
```

<details><summary>Click to expand!</summary>

This is a collapsible section. You can write markdown content here, such as:

$$
\begin{equation}
\int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
\end{equation}
$$

</details>

## Tables

**notie** supports tables in markdown files. You can create tables using the following syntax:

```markdown
| Header 1 | Header 2 | Header 3 |
| -------- | -------- | -------- |
| Row 1    | Row 1    | Row 1    |
| Row 2    | Row 2    | Row 2    |
| Row 3    | Row 3    | Row 3    |
```

| Header 1 | Header 2 | Header 3 |
| -------- | -------- | -------- |
| Row 1    | Row 1    | Row 1    |
| Row 2    | Row 2    | Row 2    |
| Row 3    | Row 3    | Row 3    |

## Images

You can include images in your markdown file using the following syntax:

```markdown
![Alt text](https://placehold.co/150)
```

![Alt text](https://placehold.co/150)

You can also make the images smaller by using HTML attributes:

```markdown
<img src="https://placehold.co/150" alt="placeholder" style="display: block; max-height: 30%; max-width: 30%;">

<div class="caption">

This is a placeholder image.

</div>
```

<img src="https://placehold.co/150" alt="placeholder" style="display: block; max-height: 30%; max-width: 30%;">

<div class="caption">

This is a placeholder image.

</div>

## Links

You can include links in your markdown file using the following syntax:

```markdown
[Click here to visit Google](https://www.google.com)
```

[Click here to visit Google](https://www.google.com)

## Footnotes

You can cite things using `[^1]` and then define the footnote at the bottom of the document like so:

I am citing something here[^1]. Something else here[^2]. Multiple things here[^3] [^4].

[^1]: This is the footnote.

[^2]: This is another footnote.

[^3]: This is yet another footnote.

[^4]: This is the last footnote.

## Request for more features

If you would like to see more features in **notie**, please feel free to open an issue on the [GitHub repository](https://github.com/branyang02/notie).
