About
Back

A tour of MDX components

A post solely dedicated to the components used in this blog.

A tour of MDX components

Code

Inline

This is an example of inline code: const x = 1;

Basic Block

TypeScript
import { Component } from "react";
 
export default class MyComponent extends Component {
	render() {
		return <div>Hello World</div>;
	}
}

Block With Title

MyComponent.tsx
import { Component } from "react";
 
export default class MyComponent extends Component {
	render() {
		return <div>Hello World</div>;
	}
}

Block With Highlighted Lines

MyComponent.tsx
import { Component } from "react";
 
export default class MyComponent extends Component {
	render() {
		return <div>Hello World</div>;
	}
}

Headings

H1

H2

H3

H4

H5
H6

Lists

  • Item 1
  • Item 2
  • Item 3

Math

Inline Math

This is an example of inline math: x2+y2=z2x^2 + y^2 = z^2

Block Math

x2+y2=z2x2+y2z2=0(x+yz)(xy+z)=0(x+yz)=0 or (xy+z)=0x+y=z or xy=z\begin{aligned} x^2 + y^2 &= z^2 \\ x^2 + y^2 - z^2 &= 0 \\ (x + y - z)(x - y + z) &= 0 \\ (x + y - z) &= 0 \text{ or } (x - y + z) = 0 \\ x + y &= z \text{ or } x - y = -z \end{aligned}

Tables

AssignmentDate
Report of findings of research from listed foundational work6/10/2023
Creation of proof-of-concept training dataset for images of text.6/25/2023
Code with experiementation via pytorch and available source code of realistic text-in-image generation7/20/2023

Lists

Ordered

  • Item 1
  • Item 2
  • Item 3

Unordered

  • Item 1
  • Item 2
  • Item 3

Block Quotes

This is a block quote.

Images

Five squares in a row, each with a number in them and a memory address below them.

Figures

Five squares in a row, each with a number in them and a memory address below them.
A caption
AssignmentDate
Report of findings of research from listed foundational work6/10/2023
Creation of proof-of-concept training dataset for images of text.6/25/2023
Code with experiementation via pytorch and available source code of realistic text-in-image generation7/20/2023
A caption

Info Bars

Uh oh

Watch Out!

Check this out