Next.js
TypeScript
Markdown
Blog

MDX components

2 min read
Anas Rin

Testing out MDX components.

Components

Custom List

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet

Embed Video

KaTeX Math

Dot product a\bold{a} and b\bold{b}.

ab=i=1naibi=a1b1+a2b2++anbn\bold{a}\cdot\bold{b} = \displaystyle\sum_{i=1}^n a_i b_i = a_1 b_1 + a_2 b_2 + \cdot\cdot\cdot + a_n b_n

Rotate 2D vector.

Rv=[cosθsinθsinθcosθ][xy]=[xcosθysinθxsinθ+ycosθ]\begin{aligned} R\bold{v} & = \begin{bmatrix} \cos \theta & -\sin \theta \\ \sin \theta & \cos \theta \end{bmatrix} \begin{bmatrix} x \\ y \end{bmatrix} \\ & = \begin{bmatrix} x \cos \theta - y \sin \theta \\ x \sin \theta + y \cos \theta \end{bmatrix} \end{aligned}

Derivative.

dfdx=limΔx0f(x+Δx)f(x)Δx=limh0f(x+h)f(x)h=limΔx0ΔyΔx\begin{aligned} \frac{df}{dx} & = \lim_{\Delta x \to 0}\frac{f(x+\Delta x)-f(x)}{\Delta x} \\ & = \lim_{h\to 0}\frac{f(x+h)-f(x)}{h} \\ & = \lim_{\Delta x \to 0}\frac{\Delta y}{\Delta x} \end{aligned}

SVG

Pie

SkyShady side of pyramidSunny side of pyramid

Flowchart

startiftruestopfalse

Syntax Highlighter

1
import { Button } from "@mantine/core";
2
3
function Demo() {
4
return <Button>Hello</Button>
5
}
1
*, *::before, *::after {
2
box-sizing: border-box;
3
}
1
import { Button } from "@mantine/core";
2
3
function Demo() {
4
return <Button>Hello</Button>
5
}